javascript - 在加载文档之前隐藏图像，然后对其应用效果

Question

我试图找到一种简单但可靠的方法来隐藏图像直到它被加载，然后给它一些 jQuery 效果(例如 fadeIn)但是我找到的所有方法似乎有一些问题。例如，这个解决方案:

<img id="photo" src="bigimage.jpg" style="display:none" />

$("#photo").load(function() {
    $(this).fadeIn("slow");
});

如果在 DOM 准备好之前加载图像，则可能不会触发(load() 不会触发)。

所以我写了下面的内容，它只在图像确定加载后才添加 URL...

$.fn.ImageLoad = function(url){
        $image = $(this);
        $("<img >").attr("src", url).load(function(){ 
            $image.attr("src", url);
        });
        return $image;
}; 

$("#cast").ImageLoad("http://pas-wordpress-media.s3.amazonaws.com/wp-content/uploads/2013/08/Google-Office-Building-in-NYC.jpg").fadeIn("slow");

但它只会在图像被浏览器缓存后运行 fadeIn("slow")。第一次加载时，它只是出现，没有任何效果。

在这里见你自己: http://jsfiddle.net/KKn4N/

有什么办法可以解决这个问题吗？

Answer 1

这是我的版本。每次都有效并且完全跨浏览器。

$.fn.ImageLoad = function(url){
    $this = $(this);
    $this.hide().on('load', function(){
        $this.fadeIn();
    });
    this[0].src = url;
};

关键是

• 在回调中淡入淡出
• 先躲起来
• 在设置 .src 之前监听 .load

DEMO