image.onload 事件和浏览器缓存

Question

我想在加载图像后创建一个警告框，但是如果图像保存在浏览器缓存中，

.onload

事件将不会被触发。

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

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

Answer 1

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

onload

之前设置

src

属性。

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

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

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

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

小提琴

Answer 2

如果已经设置了 src，那么在您甚至绑定事件处理程序之前，事件就会在缓存的情况下触发。所以，你也应该根据

.complete

触发事件。

代码示例：

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

Answer 3

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

1. 使用这篇文章中建议的解决方案

2. 为图片添加独特的后缀

   src

   强制浏览器重新下载它，像这样：

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

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

Answer 4

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

$(window).load(function() {})

而不是

document.ready

中就可以解决部分问题（如果您没有使用 ajax 页面）。

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>

Answer 6

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

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

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