加载图像后的同位素显示库 [英] Isotope display gallery after images loaded

问题描述

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

I tried to search and see if there was anything listed under this but I didn't see anything. I have a gallery thats laid out using Isotope and it works fine, but while the page loads, the images in the gallery are displayed down the middle of the page and then once they are loaded jump to their respective positions.

我正在尝试寻找一种方法来设置容器以使其隐藏，直到图像出现在它们的位置，然后使用$ container.fadeIn(1000)淡入它们.

I'm trying to figure out a way to set the container to hide until the images are in their spots and then fade them in with $container.fadeIn(1000);

我只是不知道加载它们后如何触发该函数.我已经尝试在一些地方使用Document.ready了，但似乎无法正确反应.

I just don't know how to trigger that function after they are loaded. I've tried using Document.ready a few places and can't seem to get it react right.

<script>
$(function(){

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

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

  });

$container.fadeIn(1000);

});

这种类型的作品，但是它并没有真正收听图像完全加载.

This kind of works but it isn't really listening for the images to be fully loaded yet.

推荐答案

插件的作者对其进行了解释GitHub .实际上，这很简单.只需在同位素库开始之前添加fadeIn.

The plugin's author explains it on GitHub. It's pretty simple actually. Just add the fadeIn right before starting the isotope gallery.

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

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

这篇关于加载图像后的同位素显示库的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！