js事件3

时间：2015-06-09 13:33:44 阅读：189 评论：0 收藏：0 [点我收藏+]

标签：

一、loading——（用来加载位于网页中的文件，而非本地的）

例子：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="div1">loading...... <span id="span1">0%</span></div>
</body>

<script type="text/javascript">
    var arr=["http://h.hiphotos.baidu.com/image/pic/item/00e93901213fb80e6c1c307635d12f2eb8389445.jpg","http://e.hiphotos.baidu.com/image/pic/item/5882b2b7d0a20cf4d51141c275094b36acaf992e.jpg","http://f.hiphotos.baidu.com/image/pic/item/d62a6059252dd42aedabbeb6003b5bb5c9eab809.jpg"];

    var div1=document.getElementById("div1");
    var span1=document.getElementById("span1");

    var imgs=[];
    var index=0;

    for (var i=0; i<arr.length; i++){

        var imgObj=new Image();
        imgObj.src=arr[i];

        imgObj.onload=function (){

            index++;
            span1.innerHTML=parseInt(index/arr.length*100)+"%";
            imgs.push(this);

            if (index==arr.length){
                //全部加载完毕
                div1.innerHTML="";

                for (var j=0; j<arr.length; j++){

                    div1.appendChild(imgs[j]);
                }
            }
        }
    }
</script>
</html>