使用jQuery检测图片加载

Question

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

我在.click事件中更改了这个图片的src。

可以加载超过20张不同的图片，在更改src后。

1) 我如何知道图片是否已经加载（应该被缓存）或者它必须被加载？

2) 如何运行两个不同的函数，一个用于已加载的图片，另一个用于未加载的图片？

谢谢。

- James

---

还可以参考这个问题：https://dev59.com/t0rSa4cB1Zd3GeqPavUe - J. Taylor

可能是检测图像何时加载的跨浏览器方法的重复问题。 - Liam

Answer 1

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

更新2017年：

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

纯JS/DOM：

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

- jAndy

---

如何运行两个不同的函数，一个是已加载的，另一个是未加载的？ - James

@Happy：无论图像是从服务器加载还是从浏览器缓存中加载，此事件都会被触发。我不知道有什么区分两者的可能性。 - jAndy

请注意，自jQuery 1.7起，.on()更受青睐，而不是.bind()。其余代码相同 :) - Spinal

这个答案确实需要更新。bind()函数已经被取代并弃用了一段时间。 - Liam