<!--
-->
<html>
<head>
<title></title>
<meta charset="utf-8">
<script src="imgloader.js"></script>
</head>
<body id ="body">
<!--
<button id="stop">stop</button>
-->
</body>
<script>
//1.使用timer模拟循环操作
/*
var display = true;
var timer = setInterval(function(){
if(!display){
clearInterval(timer);
}
console.log("hello");
},100);
var stop = document.getElementById("stop");
stop.onclick = function(){
display = false;
}
*/
//2.img 对象 与imgDom 对象的差别
/*
var img = new Image();
img.src = "1.jpg";
var imgDom = document.createElement("img");
imgDom.src = "1.jpg";
var body = document.getElementById("body");
body.appendChild(img);
body.appendChild(imgDom);
//二者在加入dom树后效果一致
//加入后动态改变src又如何
//img.src = "2.jpg";
//imgDom.src = "2.jpg";
//都能够实现：数据模型--->画面的单项绑定
*/
//3.onload事件的机制，它是不是会被覆盖
/*
for(var i=1;i<=16;i++){
var url = i+".jpg"
var img = new Image();
img.src = url;
img.onload = function(){
console.log(img.width);
}
}
*/
var i = 1;
var timer = setInterval(function(){
var url = i+".jpg"
var img = new Image();
img.src = url;
if(img.complete == true){
console.log(img.width);
i++;
if(i>16){
clearInterval(timer);
}
}
},30);
//结论：循环做法只有最后一张图能打印出来
//使用timer做法可以正常进行
</script>
</html>js图片预加载---for与onload事件，图片数据模型到界面的单项绑定，使用interval模拟循环操作
原文：http://blog.csdn.net/mikuscallion/article/details/44590353