我想在加载图片后创建一个警告框,但如果图像保存在浏览器缓存中,则不会触发.onload
事件。
无论图像是否已被缓存,如何在加载图像时触发警报?
var img = new Image();
img.src = "img.jpg";
img.onload = function () {
alert("image is loaded");
}
答案 0 :(得分:131)
在动态生成图片时,请在onload
之前设置src
属性。
var img = new Image();
img.onload = function () {
alert("image is loaded");
}
img.src = "img.jpg";
Fiddle - 在最新的Firefox和Chrome版本上测试过。
您还可以使用此post中的答案,我将其应用于单个动态生成的图像:
var img = new Image();
// 'load' event
$(img).on('load', function() {
alert("image is loaded");
});
img.src = "img.jpg";
答案 1 :(得分:11)
对于这种情况,有两种可能的解决方案:
为图片src
添加一个唯一的后缀,以强制浏览器再次下载,如下所示:
var img = new Image();
img.src = "img.jpg?_="+(new Date().getTime());
img.onload = function () {
alert("image is loaded");
}
在此代码中,每次将当前时间戳添加到图像URL的末尾时,您都会将其设置为唯一,浏览器将再次下载该图像
答案 2 :(得分:7)
如果已经设置了src,那么在你甚至绑定事件处理程序之前,事件就会在缓存的情况下触发。因此,您应该根据.complete
触发事件。
代码示例:
$("img").one("load", function() {
//do stuff
}).each(function() {
if(this.complete || /*for IE 10-*/ $(this).height() > 0)
$(this).load();
});
答案 3 :(得分:2)
我今天遇到了同样的问题。在尝试了各种方法之后,我意识到只需将大小调整代码放在$(window).load(function() {})
而不是document.ready
中就可以解决问题的一部分(如果你不是在调整页面)。
答案 4 :(得分:0)
我发现您可以在Chrome中执行此操作:
$('.onload-fadein').each(function (k, v) {
v.onload = function () {
$(this).animate({opacity: 1}, 2000);
};
v.src = v.src;
});
将.src设置为自身将触发onload事件。