前端页面优化:javascript图片延迟加载

时间:2021-08-01 15:50:50

自己写了个简单的图片延迟加载小插件。 功能如下: 页面刷新,当前屏幕图片直接加载真实地址,body被卷去的部分和下方未显示的部分的img均加载通用图片如:loding.gif 随着屏幕上下滚动加载相应在窗口显示的img真实地址。

此处做了一个简单优化,因为延迟加载是计算每个图片距离顶部的距离然后循环赋值的,我在这里给每个图片定义一个flag标记,如果为false,循环时直接continue。这里还可以直接将图片真实地址赋值的img直接从数组中删除,两种写法从代码的臃肿性和执行的流畅性上尚未做对比。 最后附上简单的使用方法。 下面看插件源码:

0 var loding = function(elm){
1  
2 elm = elm instanceof Array ? elm : [elm];
3  
4 var i = 0,
5 imgArr = [];
6  
7 for(i; i < elm.length; i += 1){
8  
9 everyBox(elm[i]);
10  
11 }
12  
13 //给每个盒子进行遍历
14 function everyBox(box){
15  
16 var imgs = document.getElementsByTagName('img');
17  
18 //遍历每个图片数组
19 for(var i = 0; i < imgs.length; i += 1){
20  
21 everyImg(imgs[i]);
22  
23 }
24  
25 }
26  
27 function everyImg(img){
28  
29 var temp = document.body.scrollTop || document.documentElement.scrollTop,
30 windowH = window.innerHeight;
31  
32 img.temp = img.offsetTop;
33  
34 img.tempB = img.offsetTop + img.offsetHeight;
35  
36 if(img.attributes['data-src']){
37  
38 img.ok = img.attributes['data-src'].nodeValue;
39  
40 img.flag = true;
41  
42 }
43  
44 if(img.flag == true){
45  
46 if(img.temp < temp + windowH && img.tempB > temp){
47  
48 img.src = img.ok;
49  
50 img.flag = false;
51  
52 }
53  
54 imgArr.push(img);
55  
56 }
57  
58 }
59  
60 window.onscroll = function(){
61  
62 var temp = document.body.scrollTop || document.documentElement.scrollTop,
63 i = 0,
64 windowH = window.innerHeight;
65  
66 for(i; i < imgArr.length; i += 1){
67  
68 if(imgArr[i].flag){
69  
70 if(imgArr[i].temp < temp + windowH && imgArr[i].tempB > temp){
71  
72 imgArr[i].src = imgArr[i].ok;
73  
74 imgArr[i].flag = false;
75  
76 }
77  
78 }else{
79  
80 continue;
81  
82 }
83  
84 }
85  
86  
87 }
88  
89 };

插件使用方法,在head内引入loding.js 所有需要使用延迟加载的图片请按如下格式编写 <img src="通用图片地址" data-src="真实图片地址"> 调用方法: loading(elm || [elm,elm,elm]); 传入原生dom对象或dom对象数组均可。 插件会直接获取盒子内符合条件的img图片绑定延迟加载 延迟加载在线运行地址

查看原文-摘自大公爵ddamy.com