Masonry 事件：在 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});
    });
});

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

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

有什么想法吗？

FIDDLE HERE

如果将网格不透明度更改为 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 证明

Answer 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 代码仅在所有图像都已加载（呈现）后执行

希望对您有所帮助！ :)

Answer 3

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

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

Masonry 事件：在 imagesLoaded 和 layoutComplete 之后调用事件

Masonry Events: Call event after imagesLoaded and layoutComplete

javascript

jquery

imagesloaded

masonry