javascript jQuery .load() 不触发图像（可能是缓存？）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5624733/
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
jQuery .load() not firing on images (probably caching?)
提问by Oscar Godson
I have some pretty basic jQuery code:
我有一些非常基本的 jQuery 代码：
...
$(this).find('img').load(function(){
loadedImages++;
if(loadedImages == $this.find('img').length){
...
However, thats not firing consistently. It fires if i do a hard refresh or close my browser, but a normal refresh, or just hitting the same URL twice at any time without erasing the cache makes the .load()never fire.
然而，这并没有持续射击。如果我执行硬刷新或关闭浏览器，它会触发，但是正常刷新，或者在任何时间只点击相同的 URL 两次而不删除缓存会使.load()永不触发。
Any ideas on how to fix this?
有想法该怎么解决这个吗？
采纳答案by El Guapo
A way would be to add a "dummy variable" at the end of the URL that you use to grab the image... such as the time in milliseconds appended as a query string param.
一种方法是在用于抓取图像的 URL 末尾添加一个“虚拟变量”……例如作为查询字符串参数附加的时间（以毫秒为单位）。
Edit:Preventing the Browser to Cache images is a very bad idea in 99% of the cases as it will slow down your application. Instead you should check if an image is already loaded, and if not wait for the load event to complete.
编辑：在 99% 的情况下，阻止浏览器缓存图像是一个非常糟糕的主意，因为它会降低您的应用程序的速度。相反，您应该检查图像是否已经加载，如果没有，则等待加载事件完成。
回答by Raphael Schweikert
I think this has been discussed before. It's not the caching per se that is the problem but the timing: the images may already have been loaded by the time the event handler is attached (so it never gets fired). This may also occur if no caching happens, for example in a multithreaded browser on a very fast connection. Fortunately, there is a property .completethat you can use:
我想这之前已经讨论过了。问题不是缓存本身，而是时间：在事件处理程序被附加时图像可能已经加载（因此它永远不会被触发）。如果没有缓存发生，也可能会发生这种情况，例如在连接速度非常快的多线程浏览器中。幸运的是.complete，您可以使用一个属性：
var load_handler = function() {
loadedImages++;
…
}
$(this).find('img').filter(function() {
return this.complete;
}).each(load_handler).end().load(load_handler);
You can also create your own event attach function:
您还可以创建自己的事件附加功能：
jQuery.fn.extend({
ensureLoad: function(handler) {
return this.each(function() {
if(this.complete) {
handler.call(this);
} else {
$(this).load(handler);
}
});
}
});
And then call it as follows:
然后按如下方式调用它：
$(this).find('img').ensureLoad(function(){
loadedImages++;
if(loadedImages == $this.find('img').length){
…
});
回答by Oscar Godson
As Ron and El Guapo said, the answer is to add a query at the end of the URL. I did this like this:
正如 Ron 和 El Guapo 所说，答案是在 URL 的末尾添加一个查询。我是这样做的：
$(this).find('img').each(function(){
$(this).attr('src',$(this).attr('src')+'?'+new Date().getTime())
}).load(function(){
//This will always run now!
