Question

这是我的尝试，但是没有用。它会触发，但是imagesloaded不会'淡入'

    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

imagesloaded插件不适用于淡化图像。它只是在将图像加载到浏览器时抛出回调。

你需要在你的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()

Answer 4

最简单的方式

   $('.clickit').click(function(){
        $('.box').html(insert);
        $('.container img').load(function(){
              $('.container').fadeIn("slow");
        });
    });

on jsfiddle

http://jsfiddle.net/NgwTa/6/

imagesLoaded插件无法正常工作

4 个答案: