我想在加载图像后创建一个警告框，但如果图像保存在浏览器缓存中，.onload则不会触发该事件。
无论图像是否已缓存，如何在加载图像时触发警报？
var img = new Image();
img.src = "img.jpg";
img.onload = function () {
alert("image is loaded");
}
image.onload 事件和浏览器缓存
IT技术
javascript
image-loading
2021-01-12 08:34:47
5个回答
当您动态生成图像时，请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 已经设置，那么在你绑定事件处理程序之前，事件就会在缓存的情况下触发。因此，您也应该基于 off 触发事件.complete。
代码示例：
$("img").one("load", function() {
//do stuff
}).each(function() {
if(this.complete || /*for IE 10-*/ $(this).height() > 0)
$(this).load();
});
对于此类情况，有两种可能的解决方案：
- 使用此帖子中建议的解决方案
为图像添加唯一后缀以
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解决部分问题（如果您没有对页面进行 ajaxing）。
我发现你可以在 Chrome 中做到这一点：
$('.onload-fadein').each(function (k, v) {
v.onload = function () {
$(this).animate({opacity: 1}, 2000);
};
v.src = v.src;
});
将 .src 设置为自身将触发 onload 事件。
其它你可能感兴趣的问题