javascript - masonry 事件 : Call event after imagesLoaded and layoutComplete

Question

这就是我想要做的。我有一个包含大量图像的网格，因此我将 imagesLoaded 库与 masonry 一起使用。

这是我的 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 block 。

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

有什么想法吗？

FIDDLE HERE

如果将网格不透明度更改为 1，您可以看到一切都布置得很好。只是想弄清楚如何让 layoutComplete 调用以将不透明度设置为 1。

Answer 1

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

当所有图片加载完成后，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证明