Javascript监控页面指定DOM所有图片是否加载完成的代码

实现监控检测网页所有图片是否加载完成的思路：把网页所有img定义成一个数组变量，再实例化一个Image对象，然后遍历前面的数组变量，把每个src逐个附值给Image对象src，再逐个通过onload事件判断图片是否加载完成。

扩展：ready是指DOM结构加载完成后执行，不包括网页上的图片等媒体元素；onload则是DOM结构和页面资源（图片、视频、flash等）全部加载完成后执行。所以判断图片是否加载完成要用onload事件。（注意：jquery对象以及使用querySelectorAll、getElementsByTagName、getElementsByClassName获取的对象使用onload需要加下标，如[0]）。

实现代码

HTML代码：

<div id="tddx">
	<img src="https://www.tddx.net/1.jpg" alt=""/>
	<img src="https://www.tddx.net/2.jpg" alt=""/>
	<img src="https://www.tddx.net/3.jpg" alt=""/>
	<img src="https://www.tddx.net/4.jpg" alt=""/>
	<img src="https://www.tddx.net/5.jpg" alt=""/>
	<img src="https://www.tddx.net/6.jpg" alt=""/>
</div>

Javascript代码：

var tddx = document.getElementById('tddx');
var img = [],
	num = 0,
	tddxImg = tddx.querySelectorAll('img');
var imgLength = tddxImg.length;
for(var i=0;i<imgLength;i++){
	img[i] = new Image();
	img[i].src = tddxImg[i].src;
	img[i].onload = function(){
		num++;
		if(num == imgLength){
			//setTimeout(function(){
				// your code
			//},200);   
			// 图片加载完成后要执行的代码
		}
	}
}

PS：图片加载完成后要执行的代码，可以先使用setTimeout函数延迟一会后再执行。