image.onload事件和浏览器caching

我想在加载图像后创build一个警告框，但是如果图像保存在浏览器caching中， .onload事件将不会被触发。

无论图像是否被caching，如何在图像加载时触发警报？

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

Answer 1

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

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

小提琴 – 在最新的Firefox和Chrome版本上进行testing。

你也可以在这篇文章中使用这个答案，我修改了一个dynamic生成的图像：

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

小提琴

Answer 2

对于这种情况有两种可能的解决scheme：

1. 使用这个post中build议的解决scheme

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

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

在这个代码中，每当将当前时间戳添加到图像URL的末尾时，就会使其具有唯一性，浏览器将再次下载该图像

Answer 3

如果已经设置了src，那么在事件处理程序绑定之前，事件将在caching大小写中触发。 所以，你也应该触发基于.complete的事件。

代码示例：

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

Answer 4

今天我遇到了同样的问题。 尝试了各种方法后，我意识到只是把大小的代码放在$(window).load(function() {})而不是document.ready将解决问题的一部分（如果你不是ajaxing页面）。

Answer 5

我发现你可以在Chrome中做到这一点：

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

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