Javascript image.onload 事件和浏览器缓存
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12354865/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
image.onload event and browser cache
提问by Oto Shavadze
I want to create an alert box after an image is loaded, but if the image is saved in the browser cache, the .onloadevent will not be fired.
我想在加载图像后创建一个警报框，但如果图像保存在浏览器缓存中，.onload则不会触发该事件。
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");
}
回答by Fabrício Matté
As you're generating the image dynamically, set the onloadproperty before the src.
当您动态生成图像时，请onload在src.
var img = new Image();
img.onload = function () {
alert("image is loaded");
}
img.src = "img.jpg";
Fiddle- tested on latest Firefox and Chrome releases.
Fiddle- 在最新的 Firefox 和 Chrome 版本上测试。
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";
回答by Tom Sarduy
If the src is already set then the event is firing in the cached case before you even get the event handler bound. So, you should trigger the event based off .completealso.
如果 src 已经设置，那么在你绑定事件处理程序之前，事件就会在缓存的情况下触发。因此，您也应该基于 off 触发事件.complete。
code sample:
代码示例：
$("img").one("load", function() {
//do stuff
}).each(function() {
if(this.complete || /*for IE 10-*/ $(this).height() > 0)
$(this).load();
});
回答by haynar
There are two possible solutions for these kind of situations:
对于此类情况，有两种可能的解决方案：
- Use the solution suggested on this post
Add a unique suffix to the image
srcto force browser downloading it again, like this:var img = new Image(); img.src = "img.jpg?_="+(new Date().getTime()); img.onload = function () { alert("image is loaded"); }
- 使用此帖子中建议的解决方案
为图像添加一个唯一的后缀以
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
在这段代码中，每次将当前时间戳添加到图像 URL 的末尾时，您都会使其唯一，浏览器将再次下载图像
回答by user9319
I have met the same issue today. After trying various method, I realize that just put the code of sizing inside $(window).load(function() {})instead of document.readywould solve part of issue (if you are not ajaxing the page).
我今天遇到了同样的问题。在尝试了各种方法之后，我意识到只需将调整大小的代码放在里面$(window).load(function() {})而不是document.ready解决部分问题（如果您没有对页面进行 ajaxing）。
回答by Noah Ellman
I found that you can just do this in Chrome:
我发现你可以在 Chrome 中做到这一点：
$('.onload-fadein').each(function (k, v) {
v.onload = function () {
$(this).animate({opacity: 1}, 2000);
};
v.src = v.src;
});
Setting the .src to itself will trigger the onload event.
将 .src 设置为自身将触发 onload 事件。
