image.onload事件和浏览器缓存

Question

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

无论图像是否已被缓存,如何在加载图像时触发警报？

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

Answer 1

当您动态生成图像时,请在onload之前设置属性src.

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

小提琴 - 在最新的Firefox和Chrome版本上测试过.

你也可以使用这篇文章中的答案,我将其改编为一个动态生成的图像:

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

小提琴

Answer 2

对于这种情况,有两种可能的解决方案:

1. 使用此帖子中建议的解决方案

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

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

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

Answer 3

如果已经设置了src,那么在您甚至绑定事件处理程序之前,事件将在缓存的情况下触发.所以,你也应该根据事件触发事件.complete.

代码示例:

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