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块。< / p>

如果我在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();

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

3 个答案: