6

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

有任何想法吗？

在这里提琴

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

4

3 回答 3

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证明

于 2015-07-27T16:57:11.590 回答
0 
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 代码仅在所有图像已加载（渲染）后执行

希望这可以帮助！:)

于 2015-07-28T10:22:59.740 回答
0

have you ever try this one, I think this is your answer

var $container = $('.grid').masonry({
        columnWidth: 200,
        itemSelector: '.item',
        gutter: 10
    });
  $container.masonry( 'on', 'layoutComplete', function() {    
        $container.animate({'opacity':1});
    });
$container.masonry();
于 2015-08-03T14:27:09.070 回答