image.onload事件和浏览器缓存

我想在加载图像后创建一个警报框，但是如果将图像保存在浏览器缓存中，.onload则不会触发该事件。

无论图像是否已缓存，如何在加载图像后触发警报？

var img = new Image();
img.src = "img.jpg";
img.onload = function () {
   alert("image is loaded");
}

动态生成图像时，请在onload之前设置属性src。

var img = new Image();
img.onload = function () {
   alert("image is loaded");
}
img.src = "img.jpg";

Fiddle-在最新的Firefox和Chrome版本上进行了测试。

您还可以使用答案在这个岗位，我适合一次性动态生成的图像：

var img = new Image();
// 'load' event
$(img).on('load', function() {
  alert("image is loaded");
});
img.src = "img.jpg";

小提琴

如果已经设置了src，那么即使在绑定事件处理程序之前，事件也会在缓存的情况下触发。因此，您也应该基于触发事件.complete。

代码示例：

$("img").one("load", function() {
   //do stuff
}).each(function() {
   if(this.complete || /*for IE 10-*/ $(this).height() > 0)
     $(this).load();
});

对于这种情况，有两种可能的解决方案：

1. 使用这篇文章建议的解决方案

2. 向图像添加一个唯一的后缀，src以强制浏览器再次下载它，如下所示：

   var img = new Image();
   img.src = "img.jpg?_="+(new Date().getTime());
   img.onload = function () {
       alert("image is loaded");
   }

在此代码中，每次将当前时间戳添加到图像URL的末尾时，您都将其设为唯一，浏览器将再次下载该图像

我今天遇到了同样的问题。在尝试了各种方法之后，我意识到只需将调整大小的代码放在里面，$(window).load(function() {})而不是document.ready可以解决部分问题（如果您不对页面进行废止）。

我发现您可以在Chrome中执行以下操作：

  $('.onload-fadein').each(function (k, v) {
    v.onload = function () {
        $(this).animate({opacity: 1}, 2000);
    };
    v.src = v.src;
});

将.src设置为自身将触发onload事件。