大家还在为网页加载速度而烦恼吗？大家有发现网页在某些浏览器很快，而在某些浏览器却很慢吗？今天向大家介绍一下为何会出现这些情况，并给大家分享一下具体的实现方法
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 %7C%7C 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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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>下面是测试截图：
感觉是不是网页快了好多？觉得好的话给个赞
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦