网页加载加速 之 图片延迟加载

2018-06-24 01:30:31来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

大家还在为网页加载速度而烦恼吗?大家有发现网页在某些浏览器很快,而在某些浏览器却很慢吗?今天向大家介绍一下为何会出现这些情况,并给大家分享一下具体的实现方法

1.先向大家讲解一下为何需要图片延迟加载

大家知道图片的常见格式吧,图片就是一个把一点一点像素组合在一起的一组像素,图片它像素越多大小越大。一般的图片都有几kb,几十kb,大的几mb都有。这样设想如果你的图片是10kb,那么延不延迟无所谓了吧,但是如果是几十kb或者几百kb呢,让用户多等几秒?总不能因为一张图片,让用户等待几十秒才能看的内容吧?

2.图片延迟加载的实现

其实,图片延迟加载这个功能已经不是很少见了,而且部分浏览器已经实现浏览器延迟加载图片了,但是不支持的浏览器怎么办?

那么我就自己想办法,好!废话就不多说了,先贴上代码:

 1 /*
 2 *            图片延迟加载器
 3 *    优新世纪工作室-恋空 编写
 4 *
 5 */
 6 
 7 //
 8 //    window.imageList=[
 9 //        { id:"图像1ID", url:"URL", onload=加载函数 },
10 //        { id:"图像2ID", url:"URL", onload=加载函数 },
11 //        { id:"图像3ID", url:"URL", onload=加载函数 },
12 //        ....
13 //    ];
14 
15 //在页面加载完成后调用 onLoadImage();
16 
17 function onLoadImage()
18 {
19     var i=0;
20     if(window.imageList){
21         //if(typeof window.imageList != "array")
22         //    return;
23         for(i=0;i<window.imageList.length;i++){
24             var now=window.imageList[i];
25             var id,url,onloadfn;
26             if(now.id){
27                 id=now.id;
28             }
29             if(now.url){
30                 url=now.url;
31             }
32             if(now.onload){
33                 onloadfn=now.onload;
34             }
35             if(id == null || url == null){
36                 continue;
37             }
38             var nelement = document.getElementById(id);
39             nelement.src = url;
40             if(onloadfn)
41                 (onloadfn)(nelement,url);
42             id = url = onloadfn = null;
43         }
44     }
45     console.log("All Image is loaded!Total "+i+" Image!");
46     if(window.onImageAllLoad)
47         (window.onImageAllLoad)();
48 }

实例:

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4     <meta charset="utf-8" />
 5     <title>这是一个测试</title>
 6     </head>
 7     <body>
 8         <img id="img1" alt="正在加载"></img>
 9         <img id="img2" alt="正在加载"></img>
10         <img id="img3" alt="正在加载"></img>
11         <script src="SuperImageLoader.js"></script>
12         <script>
13             window.imageList=[
14             {
15                 id:"img1",
16                 url:"https://www.baidu.com/img/baidu_jgylogo3.gif",
17                 onload:function(){
18                         alert('第一张图片已加载完成!');
19                     } 
20                 },
21                 { id:"img2", url:"https://www.baidu.com/img/baidu_jgylogo3.gif"},
22                 { id:"img3", url:"https://www.baidu.com/img/baidu_jgylogo3.gif"}
23             ];
24             window.onImageAllLoad=function(){
25                 alert('所有图片已加载!');
26             }
27             onLoadImage();
28         </script>
29     </body>
30 </html>

 

下面是测试截图:

 

 

 

感觉是不是网页快了好多?觉得好的话给个赞,或者给个红包吧

 

联系QQ:2928455383

联系邮箱:2928455383@qq.com

优新世纪工作室-恋空

谢谢大家

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:Bootstrap表格

下一篇:line-height和height的区别