如果图像保存在缓存中，jQuery .load 不会触发（仅限 Chrome）答案

【问题标题】：jQuery .load doesnt fire if image is saved in cache (Chrome only)如果图像保存在缓存中，jQuery .load 不会触发（仅限 Chrome）
【发布时间】：2012-06-27 14:39:17
【问题描述】：

由于某种原因，如果图像保存在缓存中，jQuery .load 不会触发（仅限 Chrome）。

这是jsfiddle

我该如何解决？

【问题讨论】：

当——看到一个关于浏览器问题的问题不是以“仅限 IE”结尾的，这有点奇怪
最后我知道 .load() 在 Chrome 中不起作用，如果您只是在文件系统外运行。
2017 仍然是 Chrome 的问题（但不是 IE11、Edge 或 Firefox）。谷歌落后了吗？

标签： jquery image google-chrome jquery-load

【解决方案1】：

这是因为，如果当前 src 和 new src 相同，则不会加载新图像，因为两者相同。这样做的技巧是将当前的 src 值设为空白。

$("#btn").click(function(){
    $("#tst").attr('src','');
    $("#tst").attr('src','https://www.google.co.il/images/srpr/logo3w.png');
});

jsFiddle demo link

【讨论】：

我知道有比 Ohgodway 更好的方法。非常感谢！
没有破解的方法。 .each(function(){ if (this.complete) $(this).trigger('load'); });
@NigelAngel，能否提供一个 jsFiddle 演示链接？
@NigelAngel，谢谢。我明白你的意思了。但是这里的场景就像，我们在第一次加载时显示图像。然后我们使用 AJAX 通过服务器代码更新图像。现在，如果我必须重新加载图像，即使我们在 URL 中传递一个随机数作为查询字符串，简单地用相同的链接更新“src”也是行不通的。作为一种解决方案，必须重置现有的“src”并使用相同的 URL 重新加载，或者更精确地使用随机数作为查询字符串。
OP 报告 "，如果图像保存在缓存中，jQuery .load 不会触发"。他们提供的代码与他们报告的内容并不完全相关——这似乎是为了证明这个问题。虽然向 src 添加时间戳将使他们的演示工作，但他们可能正在寻找的是if (this.complete) ...

【解决方案2】：

例如，您可以使用时间戳：

    var timestamp = new Date().getTime();
    $("#image_test")
      .attr("src", "http://www.sandiegovips.com/wp-content/uploads/2014/05/test-image.jpeg?timestamp="+timestamp)
      .load(function() {
             alert("image loaded!");
       });

&lt;img id='image_test' src=""/&gt;

【讨论】：

是的，这种方法对我有用，谢谢 :)。例如..if (img == null) { img = new Image(); var timestamp = new Date().getTime(); img.src = '调色板.png'; // 将图像复制到画布 // 修复 Chrome（使用时间戳）： $(img).load('Palette.png?timestamp=' + timestamp, function () { // 现在需要图像 URL &第一个参数是必需的。 context.drawImage(img, 0, 0); }); }

【解决方案3】：

您可以通过在图像的 url 中包含时间戳来绕过缓存。这将导致每次请求时刷新缓存的图像。

【讨论】：

添加时间戳不实用...这意味着我每次都需要更改img名称，或者还有另一种方法可以使用其常规名称加载真实img但添加时间戳而不需要更改它姓名？
$('img').attr('src', $(this).attr('src')+'?'+Math.random());
这真的会每次都加载img。我想修复它，这样它就可以像 Firefox 一样工作，而不是绕过它。如果找不到更好的解决方案，我将不得不使用 jquery.browser 才能将此解决方案仅应用于 chrome
根据上面的第二个答案，如果您只是将查询字符串添加到 URL，这确实有效并且很简单。就我而言，时间戳本身是不必要的，只需添加“假”查询字符串就足以使这项工作发挥作用（即上述前两种解决方案的混合）。