javascript - 砌体事件: Call event after imagesLoaded and layoutComplete

所以这就是我想要做的。我有一个包含大量图像的网格，因此我正在使用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});
    });
});

我的目标是隐藏网格，直到加载完所有图像并完成布局，然后淡入。由于上面我的代码中的某些原因，它永远不会进入on layoutComplete块。

如果我将该块移动到imagesLoaded之外，则$ container.masonry在该点上未定义。

有任何想法吗？

FIDDLE HERE

如果将网格的不透明度更改为1，则可以看到一切都很好地布置了。只是想弄清楚如何让layoutComplete调用以将不透明度设置为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，证明了