imagesLoaded插件不工作

Question

这是我的尝试，它不起作用。它会触发，但加载的图像不会“淡入”

附加Jsfiddle：http://jsfiddle.net/NgwTa/

    var insert = "<div class='thediv'><img src='http://s1.cdn.autoevolution.com/images/news/gallery/mercedes-c63-amg-black-series-tuned-by-vath-photo-gallery_9.jpg'></div><br><div class=thediv><img src='http://s1.cdn.autoevolution.com/images/news/gallery/mercedes-c63-amg-black-series-tuned-by-vath-photo-gallery_9.jpg'></div>";


$('.clickit').click(function(){

    $('.container').imagesLoaded(function(){
        $('.box').html(insert);
    });


});

Answer 1

问题是，您正在询问容器是否所有的镜像在之前都已经加载了，是否有附加的镜像。因此，该函数是即时运行的。

尝试在追加之后运行您的imagesLoaded插件。

在加载完所有图像后淡入：

$('.clickit').click(function(){

    // Hide the box and insert the images
    $('.box').hide().append(insert);

    // Wait for the images to load
    $('.container').imagesLoaded(function(){
        $('.box').fadeIn();
    });

});

JSFiddle：http://jsfiddle.net/G2684/

加载时淡入淡出单个图像：

$('.clickit').click(function(){

    $('.box').append(insert);
    $('.thediv img').hide();

    $('.container').imagesLoaded().progress(function(instance, image){
        $(image.img).fadeIn();
    });

});

JSFiddle：http://jsfiddle.net/G2684/1/

Answer 2

图像加载插件不适用于图像淡入淡出。它只是在图片加载到你的浏览器时抛出一个回调。

您需要添加一个额外的行在您的css隐藏图像首先。

.thediv img {
width:300px;
height:200px;
display:none}

然后在脚本中包含图像的fadeIn。

$('.clickit').click(function(){

    $('.container').imagesLoaded(function(){
        $('.box').html(insert);
        $('.thediv img').fadeIn();
    });


});

这是一个JSfiddle

Answer 3

看看这个JSfiddle

代码：

var insert = "<div class='thediv'><img src='http://s1.cdn.autoevolution.com/images/news/gallery/mercedes-c63-amg-black-series-tuned-by-vath-photo-gallery_9.jpg'></div><br><div class=thediv><img src='http://s1.cdn.autoevolution.com/images/news/gallery/mercedes-c63-amg-black-series-tuned-by-vath-photo-gallery_9.jpg'></div>";

$('.clickit').click(function(){

    $('.container').imagesLoaded(function(){
        $('.box').hide().html(insert).fadeIn();
    });
});

您必须先声明fadeIn()和hide()，然后才能将结果设置为fadeIn()