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。
_{（来源：grabilla.com）}

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