JS中如何检测img图片加载完成？

JS中如何检测img图片加载完成？

在图片比较多的网页，
图片加载会需要一定的时间，
那有些效果可能需要在图片加载完成的时候做。

那么，
在js中如何判断img图片加载完成呢？

想到加载动作，
自然想到img标签的onload事件，
在图片加载完成的时候，会触发img标签的onload事件，
我们可以在onload事件的回调函数里处理需要在图片加载完成之后的动作。

是不是所有的浏览器都很好地支持图片的onload事件呢？
如果图片已经打开过一次，
存放在了浏览器的缓存里，
那么下次打开图片，
它还会触发img的onload事件吗？

请看“img图片标签onload事件跨浏览器测试”，
部分onload测试代码如下：

1. oImg.onload = function() {
   
2.     echo('图片加载完成。@' + getTime());
   
3. };
   
4. 
   
5. echo('图片加载开始。。@' + getTime());
   
6. setTimeout(function() {
   
7.     oImg.src = sUrl;
   
8. }, 1500);

复制代码

经过简单测试，
貌似onload确实是被主流浏览器所很好地支持的。
只要注意一点，
把onload回调函数的代码写在设置img对象src属性代码的前面 。