js图片预加载---for与onload事件，图片数据模型到界面的单项绑定，使用interval模拟循环操作

浏览数：23 / 时间：2015年06月09日

<!--
-->
<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>