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>