通过 jQuery 检测图像加载

Posted 2023-03-06

【中文标题】通过 jQuery 检测图像加载

【英文标题】：Detect image load by jQuery

【发布时间】：2011-07-14 15:36:25

【问题描述】：

<img src="http://site.com/image.png" />

我在 .click 事件上更改了这张图片的 src。

更换src后可以加载20多张不同的图片。

1) 我怎么知道图片是已经加载（应该缓存）还是必须加载？

2) 如何运行两个不同的函数，加载和不加载？

谢谢。

【问题讨论】：

也看到这个问题：***.com/questions/1948672/…

Browser-independent way to detect when image has been loaded的可能重复

【参考方案1】：

您需要为load event 附加一个事件处理程序：

2017 年更新：

$('img').on('load', function() 
    alert('new image loaded: ' + this.src);
);

普通的 JS/DOM：

imgNode.onload = () => 
    alert('new image loaded: ' + this.src);
;

【讨论】：

如何运行两个不同的函数，加载和不加载？

@Happy：无论图像是从服务器还是浏览器缓存加载的，都会触发此事件。我不知道两者之间有区别。

请注意，从 jQuery 1.7 开始，.on() 优于 .bind() 其余代码相同:)

这个答案真的可以使用更新。 bind() 已被取代和弃用一段时间。