js中的懒加载技术

2018年09月02日作者: 国瑞个人博客 678次浏览

所谓懒加载，就是为了减轻服务器的压力，每次请求的数据不会很多，当达到触发条件的时候，再次去请求数据，接下来我们就用js去实现以下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96

<!DOCTYPE HTML>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta name="Author" content="">
<style type='text/css'>
*{ margin:0; padding:0;}
img{
display:block;
margin-bottom:20px;
}
</style>
</head>
<body>

<img src="img/1.jpg" alt="" width="500" height="auto" />
<img src="img/2.jpg" alt="" width="500" height="auto" />
<img src="img/3.jpg" alt="" width="500" height="auto" />
<img src="img/4.jpg" alt="" width="500" height="auto" />
<img src="img/5.jpg" alt="" width="500" height="auto" />
<img src="img/6.jpg" alt="" width="500" height="auto" />
<img src="img/7.jpg" alt="" width="500" height="auto" />
<img src="img/8.jpg" alt="" width="500" height="auto" />
<img src="img/9.jpg" alt="" width="500" height="auto" />
<img src="img/10.jpg" alt="" width="500" height="auto" />
<img src="img/11.jpg" alt="" width="500" height="auto" />
<img src="img/12.jpg" alt="" width="500" height="auto" />
<img src="img/13.jpg" alt="" width="500" height="auto" />
<img src="img/14.jpg" alt="" width="500" height="auto" />

<script type="text/javascript">
var oImg = document.getElementsByTagName('img');
var length = oImg.length;

for ( var i=0;i<length;i++ )
{
oImg[i].dataSrc = oImg[i].src;
oImg[i].src = 'img/loading.jpg';
}
window.onload = function(){

var arr = [];

for ( var i=0;i<length;i++ )
{
arr[i] = oImg[i];
}
imgShow();
window.onscroll = imgShow;

function imgShow(){

for ( var i=arr.length-1;i>=0;i-- )
{
var top = offsetTop( arr[i] );
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
if ( top < ( scrollTop + winSize().height ) )
{
arr[i].src = arr[i].dataSrc;
arr.slice( i,1 );
}
}

};

function offsetTop(obj){

var top = 0;

while ( obj != document.body )
{
top += obj.offsetTop;
obj = obj.parentNode;
};

return top;

};

function winSize() {
var e = window,a = 'inner';
if (!('innerWidth' in window )){
a = 'client';
e = document.documentElement || document.body;
};
return { width : e[ a+'Width' ] , height : e[ a+'Height' ] };
};

};

</script>
</body>
</html>

//1-14.jpg是加载的图片，loading.jpg是显示正在加载的图片

百度已收录

点击快速分享：

以上就是国瑞前端个人博客带来的是《js中的懒加载技术》，感谢您的观看！

如果没有特殊的说明，本文即为国瑞前端博客原创(www.huanggr.cn)，欢迎读者转载并保留本站版权！https://www.huanggr.cn/523.html

「专业前端博客，如果觉得我的文章对您有用，请帮助本站成长」

赞( 35 ) 打赏