Question

我在我的网站上设置了同位素组合（您可以通过我的个人资料查看），我想在同位素库的图像中淡入它们加载，如下所示：http://cameronspear.com/demos/jquery-image-fade-in-on-load/（示例）。 / p>

我在这个问题上尝试过使用imagesLoaded，但它没有工作：Isotope display gallery after images loaded

此处还有评论中提到的方法（非同位素）的jsfiddle： http://jsfiddle.net/9z2u2xtk/（如果要加载超过5张图片，似乎效果不佳）

$pfcontainer.imagesLoaded(function(){  
$pfcontainer.fadeIn(1000).isotope({
        getSortData : {
            number : function( $elem ) {
            return parseInt( $elem.find('.number').text(), 10 );
          },
      },
    sortBy : 'number',
        filter: '.designs',
        animationOptions: {
            duration: 750,
            easing: 'linear',
            queue: false,
        }
    });
});

Answer 1

这是一个例子（借用同位素示例），使用同位素v2和图像加载（不包括在同位素2中，但在v1中）

Codepen

$( function() {
// init isotope   
var $container = $('.isotope').imagesLoaded( function() {
$container.isotope({
itemSelector: '.item',
masonry: {
  columnWidth: 110
}
});
// reveal all items after init
var iso = $container.data('isotope');
$container.isotope( 'reveal', iso.items );
});  
});

Answer 2

首先，感谢Macsupport的帮助。我找到了一个看起来很棒的简单解决方案（至少在我的项目中），从这个答案：https://stackoverflow.com/a/5559155/1181121

我最终使用了css

$("img").css({opacity: 0, visibility: "hidden"});
   $(document).ready(function() {
     $("img").bind("load", function () { $(this).css({opacity: 1, visibility: "visible"})});
});

加载同位素时淡入图像？

2 个答案: