砌体事件：在 imagesLoaded 和 layoutComplete 之后调用事件答案

【问题标题】：Masonry Events: Call event after imagesLoaded and layoutComplete砌体事件：在 imagesLoaded 和 layoutComplete 之后调用事件
【发布时间】：2015-02-06 17:36:57
【问题描述】：

这就是我想要做的。我有一个包含很多图像的网格，所以我将 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。

【问题讨论】：

标签： javascript jquery masonry imagesloaded

【解决方案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 证明了这一点

【讨论】：

这似乎在小提琴中工作，但对我来说似乎很奇怪。 console.log 似乎有可能在加载图像后但在砌体完成布局之前触发。我将不得不使用更多更大的图像进行测试。
我会在你的测试中推荐更多的图片，因为我怀疑图片大小会影响砌体，因为它们已经被加载了
经过一番研究，我没有发现任何证据表明 masonry() 调用是非阻塞的。所以这意味着函数会一直执行，直到布局完成。所以每次，动画都会在我提供的代码布局完成后执行。
@Corey 如果有效，请将我的帖子标记为答案，谢谢！

【解决方案2】：

jQuery(document).ready(function($){

     var wdm_wait = function(){

            jQuery("body").find("img").each(function(i) {

                   if(!this.complete)
                   {
                       return false;
                   }

            });
                 // when code reaches here Its assured that all the images are loaded
      clearInterval(waiting);   
      console.log('got here');   
      var $container = $('.grid');

    // initialize Masonry after all images have loaded 
       $container.masonry({
             columnWidth: 100,
             itemSelector: '.item',
             gutter: 10
        });
   $container.animate({'opacity':1}); 
 }

           waiting =  setInterval(wdm_wait,100);


 });

这肯定会确保您的 js 代码仅在所有图像都已加载（渲染）后执行

希望这会有所帮助！ :)

【讨论】：

@Corey ，我猜你甚至没有尝试过我的。即便如此，也可以确保仅在加载所有图像（不仅是网格中的图像，还包括整个身体）之后才初始化砌体。在这里查看小提琴链接jsfiddle.net/725nywx4/17

【解决方案3】：

你有没有试过这个，我想这就是你的答案

var $container = $('.grid').masonry({
        columnWidth: 200,
        itemSelector: '.item',
        gutter: 10
    });
  $container.masonry( 'on', 'layoutComplete', function() {    
        $container.animate({'opacity':1});
    });
$container.masonry();

【讨论】：