jQuery .load() 没有在图像上触发（可能是缓存？）答案

【问题标题】：jQuery .load() not firing on images (probably caching?)jQuery .load() 没有在图像上触发（可能是缓存？）
【发布时间】：2011-08-03 05:49:06
【问题描述】：

我有一些非常基本的 jQuery 代码：

...
$(this).find('img').load(function(){
   loadedImages++;
   if(loadedImages == $this.find('img').length){
...

但是，这并没有持续发射。如果我进行硬刷新或关闭我的浏览器，它会触发，但正常刷新，或者只是在任何时候两次点击相同的 URL 而不擦除缓存会使.load() 永远不会触发。

关于如何解决这个问题的任何想法？

【问题讨论】：

查看相关答案here
做到了，谢谢！阅读这些答案后，请参阅我的更具体的答案！

标签： javascript jquery image plugins load

【解决方案1】：

我认为这是has been discussed before。问题不是缓存本身，而是时间问题：在附加事件处理程序时图像可能已经加载（因此它永远不会被触发）。如果没有发生缓存，也可能会发生这种情况，例如在连接速度非常快的多线程浏览器中。幸运的是，有一个属性.complete 可以使用：

var load_handler = function() {
    loadedImages++;
    …
}
$(this).find('img').filter(function() {
    return this.complete;
}).each(load_handler).end().load(load_handler);

您也可以创建自己的事件附加函数：

jQuery.fn.extend({
    ensureLoad: function(handler) {
        return this.each(function() {
            if(this.complete) {
                handler.call(this);
            } else {
                $(this).load(handler);
            }
        });
    }
});

然后调用如下：

$(this).find('img').ensureLoad(function(){
    loadedImages++;
    if(loadedImages == $this.find('img').length){
    …
});

【讨论】：

如果您动态更改图像的src 并在加载时依靠“加载”事件对其进行处理，如果图像已经在缓存中，您可以手动触发加载，如下所示：image.attr('src', <newimage>); if(image[0].complete) { image.trigger('load') }
这是一个非常优雅的解决方案，比接受的解决方案更好。被接受的是一种粗略的解决方案，但它也阻止了缓存。在我的应用程序中，显示了 30 多张高分辨率照片，所以我遇到了一个问题，即第一次加载需要一段时间才能加载所有图像并计算大小（每次都不同的大小），并且在重新访问时，缓存导致 load() 根本没有启动。如果我禁用缓存，每次访问者进来时都需要很长时间才能加载。
这绝对是公认的解决方案。阻止整个缓存是一个糟糕的主意！

【解决方案2】：

一种方法是在用于抓取图像的 URL 末尾添加一个“虚拟变量”...例如作为查询字符串参数附加的以毫秒为单位的时间。

编辑：阻止浏览器缓存图像在 99% 的情况下是一个非常糟糕的主意，因为它会减慢您的应用程序。相反，您应该检查图像是否已经加载，如果没有则等待加载事件完成。

【讨论】：

这并不粗俗，这是常见的做法。 :)
@Diodeus -- 非常正确...我将编辑帖子，使其看起来不那么糟糕...谢谢。
@Diodeus 如果您正在创建 HttpHandlers 来重写 Urls，这并不常见。
@Diodeus：很粗糙。然后，您实际上正在失去缓存的神奇奇迹——这是您网站上绝对想要的东西。
我经常听说这被称为cache busting。

【解决方案3】：

正如 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!

【讨论】：

虽然这确实回答了原始问题，但它可以防止您的图像被浏览器缓存，这并不理想，因为它会减慢页面加载速度。