0

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

附上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);
    });


});
4

4 回答 4

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/

于 2013-08-29T23:13:35.387 回答
1

imagesloaded 插件不适用于褪色图像。当图像加载到浏览器时，它只是抛出一个回调。

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

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

然后在您的脚本中为您的图像添加一个淡入淡出。

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

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


});

这是一个JSfiddle

于 2013-08-29T23:19:14.830 回答
0

看看这个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()andhide()并且您可以将结果设置为fadeIn()

于 2013-08-29T23:05:18.890 回答
0

最简单的方法

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

在 jsfiddle 上

http://jsfiddle.net/NgwTa/6/
于 2013-08-29T23:16:06.507 回答