javascript - 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 插件不适用于淡入淡出图像。当图像加载到浏览器时，它只会引发回调。

您需要在 CSS 上添加额外的一行来首先隐藏图像。

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

然后在脚本中的图像中添加淡入效果。

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

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


});

这是一个JSfiddle