砖石事件:在图像加载和布局完成后调用事件

下面是我要做的。我有一个有很多图像的网格，所以我使用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});
    });
});

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

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

有什么想法吗？

小提琴在这里

如果将栅格不透明度更改为1，您可以看到所有东西都布置得很好。只是想弄清楚如何调用layoutComplete来将不透明度设置为1。

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});
});

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);

 });

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