Onload 事件和浏览器缓存

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

如何触发一个警报时，一个图像已经加载，而不管是否已经缓存的图像？

var img = new Image();
img.src = "img.jpg";
img.onload = function () {
alert("image is loaded");
}
279175 次浏览
小开

对于这种情况，有两种可能的解决办法:

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

  2. 在图片 src中添加一个唯一的后缀，强制浏览器再次下载，如下所示:

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

In this code every time adding current timestamp to the end of the image URL you make it unique and browser will download the image again

小开
最佳答案

在动态生成图像时，将 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";

小提琴

小开

我今天遇到了同样的问题。在尝试了各种方法之后，我意识到只要把大小代码放在 $(window).load(function() {})而不是 document.ready中，就可以解决一部分问题(如果你没有给页面加锯齿的话)。

小开

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

代码示例:

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

我发现你可以在 Chrome 中这样做:

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

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


提交答案