image.onload事件和浏览器缓存
image.onload event and browser cache
我想在加载图像后创建一个警报框,但如果图像保存在浏览器缓存中,则不会触发.onload
事件。
无论图像是否已缓存,在加载图像时如何触发警报?
var img = new Image();
img.src = "img.jpg";
img.onload = function () {
alert("image is loaded");
}
动态生成图像时,请在src
之前设置onload
属性。
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";
Fiddle
如果src已经设置,那么在绑定事件处理程序之前,事件就会在缓存的情况下触发。因此,您也应该触发基于.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
中就可以解决部分问题(如果您不调整页面)。
我的改进:
document.addEventListener("DOMContentLoaded", function () {
let el = document.getElementsByTagName("img")
Object.values(el).forEach(function (el) {
var img = new Image();
img.onload = function () {
el.style.opacity = 1;
}
img.src = el.src
})
});
<style>
img {
opacity: 0;
transition: opacity .4s cubic-bezier(.25, .45, .45, .95);
}
</style>
我发现你可以在Chrome中做到这一点:
$('.onload-fadein').each(function (k, v) {
v.onload = function () {
$(this).animate({opacity: 1}, 2000);
};
v.src = v.src;
});
将.src设置为自身将触发onload事件。
相关文章:
- image.onload事件和浏览器缓存
- 微软边缘浏览器缓存中的RESTful Angular应用程序
- 使用查询字符串方法清除浏览器缓存
- 浏览器缓存PHP生成的CSS和Javascript文件
- 阻止浏览器缓存上载的图像
- 停止浏览器缓存文本文件
- 从浏览器缓存渲染的页面
- 如何强制从浏览器缓存重新加载当前页面
- 在jquery中按Ctrl+F5清除浏览器缓存
- 如何在注销后从服务器重新加载angular应用程序,而不使用浏览器缓存
- 有没有任何方法可以使用js清除浏览器缓存,至少是我的域相关文件
- mvc项目中javascript和css文件的浏览器缓存
- 阻止浏览器缓存AJAX请求
- 如何使用jquery将ajax响应存储在浏览器缓存中
- 有没有办法防止浏览器缓存滚动位置和缩放级别等值
- 咖啡脚本和浏览器缓存
- 使用 AJAX 提交时使浏览器缓存表单数据
- 检查对象是否适合浏览器缓存
- 浏览器缓存是否知道javascript xmlhttp请求
- $('#textboxId').val() 返回旧值(浏览器缓存问题)