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

Answer 2

试试这个。 load功能已激活，您可以在

后执行任何操作

$("img[src$='gif']").each( function() {
        $(this).css({'opacity': '0.05'});
        $(this).one('load', function() {
      alert('Image Loaded'); 
    }).each(function() {
      if(this.complete) $(this).load();
    });
    });

jQuery .load（）;不使用图像

2 个答案: