image.onload事件和浏览器缓存 [英] image.onload event and browser cache

问题描述

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

无论图像是否已被缓存，如何在加载图像时触发警报？

  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; 
  

小提琴 - 在最新的Firefox和Chrome版本上测试过。

您也可以在此处使用答案< a href =https://stackoverflow.com/questions/3877027/jquery-callback-on-image-load-even-when-the-image-is-cached>帖子，我改编了一个单个动态生成的图像：

  var img = new Image（）; 
 //'load'事件
 $（img）.on（'load'，function（）{
 alert（image is loaded）; 
}）; 
 img.src =img.jpg; 
  

小提琴

I want to create an alert box after an image is loaded, but if the image is saved in the browser cache, the .onload event will not be fired.

How do I trigger an alert when an image has been loaded regardless of whether the image has been cached or not?

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

解决方案

As you're generating the image dynamically, set the onload property before the src.

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

Fiddle - tested on latest Firefox and Chrome releases.

You can also use the answer in this post, which I adapted for a single dynamically generated image:

var img = new Image();
// 'load' event
$(img).on('load', function() {
  alert("image is loaded");
});
img.src = "img.jpg";

Fiddle

这篇关于image.onload事件和浏览器缓存的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！