JS 图像延迟加载

Posted Powell Zhao

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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>

 

以上是关于JS 图像延迟加载的主要内容,如果未能解决你的问题,请参考以下文章

js 常用代码片段

简单的JavaScript图像延迟加载库Echo.js

如何在延迟加载期间在图像占位符上显示“加载”gif图像

JS 图像延迟加载

片段布局加载延迟

9个vue.js库