135

我想在加载图像后创建一个警报框,但是如果图像保存在浏览器缓存中,.onload则不会触发该事件。

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

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

5 回答 5

185

当您动态生成图像时,请onloadsrc.

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";

小提琴

于 2012-09-10T15:41:59.900 回答
12

如果 src 已设置,则事件在缓存案例中触发,甚至在您绑定事件处理程序之前。因此,您也应该触发基于 off 的事件.complete

代码示例:

$("img").one("load", function() {
   //do stuff
}).each(function() {
   if(this.complete || /*for IE 10-*/ $(this).height() > 0)
     $(this).load();
});
于 2015-07-24T19:52:26.923 回答
5

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

  1. 使用这篇文章中建议的解决方案
  2. 为图像添加唯一后缀以src强制浏览器再次下载它,如下所示:

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

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

于 2012-09-10T15:36:59.390 回答
3

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

于 2013-01-03T06:05:04.773 回答
-1

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

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

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

于 2017-02-01T08:15:31.407 回答