Javascript image.onload事件和浏览器缓存

我想在加载图像后创建一个警报框，但如果图像保存在浏览器缓存中，则不会触发

.onload

事件

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

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

---

对于此类情况，有两种可能的解决方案：

使用上建议的解决方案

将唯一后缀添加到图像

src

以强制浏览器再次下载，如下所示：

var img=newimage（）；
img.src=“img.jpg？quot+（new Date（）.getTime（））；
img.onload=函数（）{
警报（“图像已加载”）；
}

---

在此代码中，每次将当前时间戳添加到图像URL的末尾时，您都会使其唯一，并且浏览器将再次下载图像

当您动态生成图像时，请在

src

之前设置

onload

属性

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

-在最新的Firefox和Chrome版本上测试

您也可以使用本文中的答案，我将其改编为单个动态生成的图像：

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

---

我今天遇到了同样的问题。在尝试了各种方法之后，我意识到只需将调整大小的代码放入

$（window.load（function（）{}）

而不是

document.ready

就可以解决部分问题（如果您没有调整页面）。

如果已经设置了src，那么在绑定事件处理程序之前，事件将在缓存案例中触发。因此，您应该根据

.complete

触发事件

代码示例：

$("img").one("load", function() {
   //do stuff
}).each(function() {
   if(this.complete || /*for IE 10-*/ $(this).height() > 0)
     $(this).load();
});

---

我发现您可以在Chrome中执行此操作：

  $('.onload-fadein').each(function (k, v) {
    v.onload = function () {
        $(this).animate({opacity: 1}, 2000);
    };
    v.src = v.src;
});

---

将.src设置为自身将触发onload事件。

所有这一切的可能重复之处在于取消缓存。这是解决这个问题的错误方法。法布里西奥的回答是正确的。在设置

.src

值之前，只需设置

.onload

处理程序，您就不会错过IE某些版本中的onload事件。是的，您是对的，但缓存并不总是可取的，有时不应该缓存图像。当然，在这种特殊情况下，这取决于需要在我的angular应用程序中，我尝试了其他答案所说的一切，但没有帮助。但强制不这样缓存对我来说确实有效。所以再加上我的一个。在最新的Chrome.Wait版本中，唯一对我有效的解决方案。为什么您的第二个代码示例做了错误的事情，在设置.onload之前设置了

.src

？您在第一个代码示例中的操作是正确的，但却把第二个代码示例搞砸了。第二个在IE的某些版本中无法正常工作。@jfriend00不，不是一团糟。备份代码（第二个）正是为了防止第一个以某种方式停止工作

=]

它利用了一个

。完成
检查，以防图像已经被缓存，因此代码正在演示它。当然，为了获得最佳实践，您可以在所有处理程序绑定后设置
src
。在这种情况下，没有理由依赖
.complete
。只需在设置
.src
之前先设置加载处理程序，就不需要它了。我写了一个幻灯片，在每一个可以想象的浏览器中都有成千上万的网站使用，第一种技术每次都有效。这样从头开始创建新图像时，无需检查
。完成
。好的，谢谢提醒，更新答案以反映您的推理
=]
。另外@jfriend00你能检查一下图像是否加载到IE中吗？不知道这是我的网络还是IE和图像的问题。今天我还发现webkit需要
img.src=''
才能分配新的src（如果以前使用过）。这也是浏览器缓存了图像的情况下的一个很好的答案，可以正常工作，窗口加载正是我所面临的问题。将
$（文档）.ready
更改为
$（窗口）.load
解决了我的问题。