砌体事件：在图像加载和布局完成后调用事件

所以这就是我想要做的。我有一个很多图像的网格，所以我使用图像加载库和砌体。砌体事件：在图像加载和布局完成后调用事件

这里是我的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}); 
    }); 
});

我的目标是让电网隐藏，直到所有图像都加载并且布局已完成，然后淡入其中。出于某种原因，在我上面的代码中，它永远不会进入layoutcom完整的块。

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

任何想法？

FIDDLE HERE

如果您更改网格的不透明度为1，你可以看到一切都越来越奠定了罚款。只是想弄清楚如何让layoutComplete调用将不透明度设置为1.

来源

2015-02-06 Corey

您不需要在砌体上使用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-27 16:57:11 jumojer

这似乎在捣鼓工作，但似乎奇怪了吧。看起来''console.log'可以在图像加载之后但砌体完成布局之前触发。我将不得不测试更多更大的图像。 – Corey 2015-07-27 17:10:58

我会在你的测试中推荐大量的图片，因为我怀疑图片尺寸会影响石工，因为他们已经加载 – jumojer 2015-07-27 18:59:43

经过一番研究，我还没有找到任何证据表明masonry（）调用是非阻塞的。所以这意味着该函数会在布局完成之前执行。所以每一次，动画都会在布局完成后使用我提供的代码执行。 – jumojer 2015-07-28 13:56:23

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-28 10:22:59 WisdmLabs

@Corey，我猜你甚至都没有试过我的。即使这样也能确保砌体在所有图像（不仅仅是网格中的全部图像）都被加载之后才被初始化。查看小提琴链接 https://jsfiddle.net/725nywx4/17/ – WisdmLabs 2015-08-04 05:43:29

你有没有尝试这一个，我觉得这是你的答案

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

来源

2015-08-03 14:27:09 kalkanbatuhan

砌体事件：在图像加载和布局完成后调用事件

回答

相关问题