Javascript imagesLoaded插件不工作

这是我的尝试，但不起作用。它会启动，但图像隐藏不会“淡入”

附件：

var insert=“
”；
$（'.clickit'）。单击（函数（）{
$（'.container'）.imagesLoaded（函数（）{
$（'.box'）.html（插入）；
});
});

看看这个

代码：

var insert=“
”；
$（'.clickit'）。单击（函数（）{
$（'.container'）.imagesLoaded（函数（）{
$（'.box'）.hide（）.html（insert.fadeIn（）；
});
});

---

您必须先声明

fadeIn（）

和

hide（）

，然后才能将结果设置为

fadeIn（）

问题是您要询问容器在添加任何图像之前是否已加载所有图像。因此，该函数是即时运行的

尝试在追加后运行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：

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

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

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

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

});

jshiddle:

最简单的方法

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

关于jsfiddle

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

---

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

你需要在css上添加一行额外的内容来隐藏图像

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

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

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

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


});

---

这里有一个用CSS隐藏的.box类，而不是用JavaScript隐藏。最好用一个普通的CSS类隐藏它。这个类在所有.box中都会淡出，它不会单独处理图像，然后您需要在

progress

事件上运行

fadeIn

。请参阅我更新的帖子。这不是示例中列出的插件的解决方案

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

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

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


});