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

标签 fadein document-ready

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

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

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

<script>
$(function(){

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

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

  });

$container.fadeIn(1000);

});

这种工作,但它并没有真正倾听图像是否完全加载。

最佳答案

插件作者 explains it on GitHub .其实很简单。只需添加 fadeIn就在开始同位素库之前。

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

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

关于fadein - 加载图像后的同位素显示库,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15177919/

相关文章:

jQuery的就绪队列$(foo)和$(bar)是顺序运行还是并行运行?

jquery - 我如何在每次加载页面时执行 Jquery 的函数?

javascript - 使用 jQuery 对数组中的元素进行动画处理

javascript - Vanilla javascript,而不是 CSS 或 jQuery,淡入、淡出图像更改

javascript - Jquery fadeIn() 不工作

每次 div 淡入时触发 css3 动画

javascript - 当放置在 Rails 的 HEAD 中时,jQuery 就绪事件不会在每个页面加载时触发

javascript - 不同文档就绪处理程序之间的区别

javascript - 如何在 $.getScript 加载的文件内设置 $(document).ready 函数

javascript - Jquery 淡入淡出