image.onload 事件和浏览器缓存答案

【问题标题】：image.onload event and browser cacheimage.onload 事件和浏览器缓存
【发布时间】：2012-09-03 12:10:19
【问题描述】：

我想在加载图片后创建一个警告框，但如果图片保存在浏览器缓存中，.onload 事件将不会被触发。

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

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

【问题讨论】：

jQuery callback on image load (even when the image is cached)的可能重复

标签： javascript image-loading

【解决方案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";

Fiddle

【讨论】：

等等。为什么您的第二个代码示例做错事并在设置.onload 之前设置.src？您在第一个代码示例中是正确的，但在第二个代码示例中搞砸了。第二个在某些版本的 IE 中无法正常工作。
@jfriend00 不，不是一团糟。备份代码（第二个）恰好是为了以防第一个代码以某种方式停止工作。 =] 它使用.complete 检查以防图像已被缓存，因此代码正在演示它。当然，为了获得最佳实践，您始终可以在所有处理程序绑定后设置src。
在这种情况下没有理由依赖.complete。只需在设置 .src 之前先设置您的负载处理程序，就不需要它了。我已经编写了一个幻灯片，在每个可以想象的浏览器中都被数千个站点使用，并且第一种技术每次都有效。像这样从头开始创建新图像时，无需检查.complete。
好的，感谢您的提醒，更新了答案以反映您的推理=]。 @jfriend00 你能检查一下图像是否在 IE 中加载吗？想知道这是我的网络问题还是 IE 和图像的问题。
另外今天发现webkit需要img.src = ''才能分配新的src，如果之前用过的话。

【解决方案2】：

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

代码示例：

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

【讨论】：

【解决方案3】：

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

使用this post 建议的解决方案

给图片添加一个唯一的后缀src，强制浏览器重新下载，像这样：

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

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

【讨论】：

这一切都是为了打败缓存。这是解决这个问题的错误方法。正确的方法是在 Fabricio 的回答中。只需在设置.src 值之前设置.onload 处理程序，您就不会错过某些版本的IE 中的onload 事件。
是的，你是对的，但并不总是需要缓存，有时图像不应该被缓存。当然，在这种特殊情况下，这取决于需求
在我的角度应用程序中，我尝试了其他答案所说的一切，但没有帮助。但是强迫不要像这个答案所说的那样缓存确实对我有用。所以加一个我。
在最新版本的 Chrome 中唯一对我有用的解决方案。

【解决方案4】：

我今天遇到了同样的问题。在尝试了各种方法后，我意识到只需将调整大小的代码放在 $(window).load(function() {}) 而不是 document.ready 中就可以解决部分问题（如果您没有对页面进行 ajax 处理）。

【讨论】：

这也是浏览器缓存图片、窗口加载正常的情况
正是我面临的问题。将$(document).ready 更改为$(window).load 解决了我的问题。

【解决方案5】：

我发现你可以在 Chrome 中做到这一点：

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

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

【讨论】：