image.onload事件和浏览器caching

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

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

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

在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"; 

小提琴

对于这种情况有两种可能的解决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的末尾时,就会使其具有唯一性,浏览器将再次下载该图像

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

代码示例:

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

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

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

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

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