JS 图像延迟加载

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <style type="text/css">
 7             #box{
 8                 width: 100px;
 9                 height: 100px;
10                 background: url(img/1.jpg);
11             }
12         </style>
13     </head>
14     <body>
15         <div id="box">
16         
17         </div>
18     </body>
19     
20     <script type="text/javascript">
21 //        http://pic70.nipic.com/file/20150618/21278791_104700147417_2.jpg
22 
23     var box = document.getElementById("box");
24     // 创建一个 image 对象
25     var img = new Image;
26     img.width = 100;
27     img.height = 100;
28     // img对象只要设置 src 属性就开始加载图片，为了避免图片加载太快的问题，图片的src 属性在最后设置
29     img.onload= function(){
30         // 加载完毕之后，替换图片    
31         box.appendChild(img);
32         img.height = 0;
33         var timer = setInterval(function(){
34             img.height+= 10;
35             if(img.height == 100){
36                 box.style.background = "none";
37                 clearInterval(timer);
38             }
39         },30);
40     }
41 
42     img.src = "http://www.infinistudio.cn/uploads/allimg/160318/1-16031Q922210-L.jpg";
43     
44     
45         
46     
47     </script>
48 </html>