图像.onload事件和浏览器缓存

Question

我想在图片加载完成后创建一个提示框，但如果该图片已经存在于浏览器缓存中，则不会触发.onload事件。

无论图片是否被缓存，如何在图片加载完成后触发提示框？

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

- Oto Shavadze

---

可能是在图片加载完成后执行回调函数的jQuery方法（即使图片已经被缓存）的重复问题。 - Fabrício Matté

Answer 1

由于您正在动态生成图像，请在 src 之前设置 onload 属性。

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

Fiddle - 在最新的 Firefox 和 Chrome 版本上测试通过。

你也可以使用此文章中的答案，我将它适用于单个动态生成的图像:

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

网页

- Fabrício Matté

---

@jfriend00 不是搞砸了。备份代码（第二个）正是为了防止第一个代码出现问题。=] 它利用 .complete 检查，以防图像已经被缓存，因此代码进行了演示。当然，为了最佳实践，您可以在所有处理程序绑定之后设置 src。 - Fabrício Matté

在这种情况下，没有任何理由依赖于“ .complete ”。只需在设置“. src”之前先设置您的加载程序，就绝不需要使用它。我编写了一个幻灯片，被成千上万的站点在各种浏览器中使用，第一种技术每次都有效。像这样从头开始创建新图像时，永远不需要检查“. complete”。 - jfriend00

今天我发现，如果之前已经使用过img.src，那么在赋新的src之前，需要先将其设为空字符串''。 - quux

图片的onload属性对于缓存的图片根本不起作用吗？ 我有一个HTML IMG标签，其中包含 onload 属性，它只会触发一次。之后只有在使用 ctrl + F5 时才能再次触发。 - techie_28

@techie_28，如果我没记错的话，onload HTML属性应该会为缓存的图像触发。也许你可以提一个新问题，这样社区会更关注。=] - Fabrício Matté

Answer 2

如果src已经设置，那么在缓存的情况下事件会在绑定事件处理程序之前触发。因此，你应该基于 .complete 触发事件。

代码示例：

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

- Tomas Ramirez Sarduy

Answer 3

这类情况有两种可能的解决方案：

1. Use the solution suggested on this post

2. Add a unique suffix to the image src to 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");
   }
   

在这段代码中，每次将当前时间戳添加到图像URL的末尾，使其变得唯一，浏览器会重新下载该图像。

- haynar

---

这样只会破坏缓存。这是解决问题的错误方法。正确的方法在Fabricio的答案中。在设置.src值之前设置.onload处理程序，就不会错过IE某些版本中的onload事件。 - jfriend00

是的，你说得对，但并不总是希望进行缓存，有时图像不应被缓存。当然，在这种特定情况下，这取决于需求。 - haynar

在我的 Angular 应用程序中，我尝试了其他答案中提到的所有方法，但都没有帮助。但是像这个答案所说的强制不缓存确实对我有用。因此我给它点赞。 - Thanu

在最新版本的Chrome中，唯一有效的解决方案是这个。 - Young Bob

解决了当图片名称相同但实际上已更改的问题。 - Martin Müsli

解决了我的问题，当图片名称相同，但实际上已经更改。 - undefined

Answer 4

今天我遇到了同样的问题。尝试了各种方法之后，我发现只需将调整代码放在$(window).load(function() {})而不是document.ready中会解决部分问题（如果您没有ajax页面）。

- user9319

---

这也是一个适用于浏览器已缓存图像的情况的好答案，在窗口加载时正常工作。 - QuantumBlack

这正是我所遇到的问题。将 $(document).ready 更改为 $(window).load 解决了我的问题。 - Tariqul Islam

Answer 5

我的改进：

document.addEventListener("DOMContentLoaded", function () {
  let el = document.getElementsByTagName("img")
  Object.values(el).forEach(function (el) {
    var img = new Image();
    img.onload = function () {
      el.style.opacity = 1;
    }
    img.src = el.src
  })
});

.

<style>
  img {
    opacity: 0;
    transition: opacity .4s cubic-bezier(.25, .45, .45, .95);
  }
</style>

- Oreo

---

你的回答可以通过提供更多支持信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人可以确认你的答案是正确的。您可以在帮助中心找到有关如何编写良好答案的更多信息。 - Community

Answer 6

我发现在Chrome中你可以这样做：

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

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

- Noah Ellman