jQuery IE不会触发加载事件

Question

在加载图片时，我遇到了问题。我想要的效果是在图像后面显示一个加载.gif，当它加载时淡入它。下面的代码适用于我通过AJAX加载的任何图像，但是在页面加载时我想要相同的效果。

$(function() {
    $("#products img").hide().bind("load", function() {
        $(this).fadeIn(300);
    });
});

注意，除了IE（仅测试9）之外，这在所有浏览器中都能很好地工作。根据我的理解，它不会触发load事件，因为图像被缓存或图像在事件被绑定之前已加载。我希望浏览器缓存图片，因此在图像src的末尾添加日期/时间戳并不是一个真正的选择。

我可以说If the image is already loaded in some form or another, show it. Otherwise hide it and fade it in once it's loaded.吗？

编辑：我试过设置一个小提琴，但它并不喜欢它。 Here it is anyway if it's helpful

修改

如果有人对这两个答案感兴趣I've put up a quick js performance test。 http://grabilla.com/0321b-92ca6469-c766-4d84-8109-b07ab1967850.png

Answer 1

我遇到了同样的问题并解决了这个问题：

 $("#products img").one('load.FadeIn', function () {
     $(this).fadeIn(300);
 });

 $("#products img").trigger('load.FadeIn');

图片已经加载并淡入或我们手动触发事件。

Answer 2

您可以添加一个过滤器，该过滤器仅传递尚未加载的图像：

$("#products img")
  .filter(function(i, img) { return ! img.complete })
  .hide()
  .bind("load", function() {
    $(this).fadeIn(800);
  });

demo