4

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

我试图找出一种方法来将容器设置为隐藏,直到图像出现在它们的位置,然后用 $container.fadeIn(1000); 淡入它们。

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

<script>
$(function(){

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

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

  });

$container.fadeIn(1000);

});

这种工作,但它并没有真正监听到完全加载的图像。

4

1 回答 1

10

该插件的作者在 GitHub 上对其进行了解释。其实很简单。fadeIn只需在启动同位素库之前添加右侧。

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

$container.imagesLoaded( function(){
  $container.fadeIn(1000).isotope({
    layoutMode : 'fitRows',
    itemSelector : '.photo'
  });
});
于 2013-03-26T07:38:56.710 回答