Question

我试图搜索并查看是否有任何列出的内容，但我没有看到任何内容。我有一个使用Isotope布局的画廊，它工作正常，但是当页面加载时，画廊中的图像显示在页面的中间，然后一旦加载就跳转到各自的位置。

我正试图找出一种方法来设置容器隐藏，直到图像在他们的位置，然后用$ container.fadeIn（1000）淡入它们;

我只是不知道如何在加载后触发该功能。我已经尝试过在一些地方使用Document.ready似乎无法让它做出正确的反应。

<script>
$(function(){

  var $container = $('#container');

  $container.imagesLoaded( function(){
    $container.isotope({
        layoutMode : 'fitRows',
        itemSelector : '.photo'
    }); 

  });

$container.fadeIn(1000);

});

这种作品，但它并没有真正倾听要完全加载的图像。

Answer 1

插件的作者explains it on GitHub。实际上它非常简单。只需在启动同位素库之前添加fadeIn。

var $container = $('#container');

$container.imagesLoaded( function(){
  $container.fadeIn(1000).isotope({
    layoutMode : 'fitRows',
    itemSelector : '.photo'
  });
});

加载图像后的同位素显示库

1 个答案: