砌体事件:在imagesLoaded和layoutComplete之后调用事件

Question

所以这就是我想要做的.我有一个包含大量图像的网格,所以我使用imagesLoaded库和砌体.

这是我的CSS:

.grid {
    opacity:0;
}

和HTML:

<div class="grid">
    <div class="grid-sizer"></div>
    <div class="gutter-sizer"></div>
    <div class="item">image</div>
    <div class="item">image</div>
    <div class="item">image</div>
</div>

这是我的JS:

var $container = $('.grid');
// initialize Masonry after all images have loaded  
$container.imagesLoaded( function() {
    $container.masonry({
        columnWidth: '.grid-sizer',
        itemSelector: '.item',
        gutter: '.gutter-sizer'
    });
    $container.masonry('on', 'layoutComplete', function(){
        console.log('got here');
        $container.animate({'opacity':1});
    });
});

我的目标是隐藏网格直到所有图像都加载并且布局完成,然后将其淡入.出于某种原因,在上面的代码中,它永远不会进入layoutComplete块.

如果我在imagesLoaded之外移动该块,则$ container.masonry未定义该点.

有任何想法吗？

骗子在这里

如果将网格不透明度更改为1,则可以看到所有内容都已正确布局.只是想弄清楚如何调用layoutComplete以将不透明度设置为1.

Answer 1

您不需要layoutComplete在砌体上使用该事件。因为您可以在砌体初始化下添加动画代码。

当所有图像加载完毕后，imageLoaded 函数将执行。然后，您可以创建砌体对象并立即设置动画，如下所示：

var $grid = $('.grid').imagesLoaded( function() {
// init Masonry after all images have loaded
$grid.masonry({
  columnWidth: 200,
  itemSelector: '.item',
  gutter: 10
});
console.log('got here');
    $('.grid').animate({'opacity':1});
});

这是一个jsfiddle证明