jQuery .load();不处理图像

Question

我正在尝试创建一个浏览器插件，使 .gif 保持淡出状态，直到完全加载为止。加载图像后，它们就会淡入。

HTML

<img src="http://media.tumblr.com/6ced3000389da1433b13c8a18bfeaf75/tumblr_inline_muf6jmZS8m1rc3mra.gif" alt="">

<img src="http://4.bp.blogspot.com/-fYJrkNWec08/T9EYOmNGPNI/AAAAAAAAC04/UtdRRM8a3hc/s640/cat-fat-dancing-cat-gif.gif" alt="">

jQuery

$("img[src$='gif']").each( function() {
    $(this).css({'opacity': '0.05'});
    $(this).load( function() {
        $(this).fadeIn();
    });
});

JS Fiddle

但是，由于 .load 函数从未激活，因此图像不会淡入。

我做错了什么？ jQuery 文档确实提到了一些跨浏览器问题，但这在最新版本的 Chrome 和 Safari 中进行了测试，但都失败了。

Answer 1

在检查 image.onload 时，使用一些简单的 JavaScript 通常会更容易:

$("img[src$='gif']").each( function() {
    var self = $(this).css({'opacity': '0.05'});

    var img = new Image();
    img.onload = function() {
        self.fadeTo('fast', 1)
    }
    img.src = this.src;

    if (img.complete) img.onload();
});

请注意，fadeIn() 仅适用于隐藏图像，不适用于不透明度较低的可见图像，这是代码的真正问题。

FIDDLE