1.使用场景
当网页上有大量图片需要加载时，如果一次性将图片全部加载完，网页加载时间会过长；
网页本身已经反应很慢了，如果你的页面上又需要引用图片，这时候同样是雪上加霜。
2.图片懒加载原理
图片懒加载，只不过是叫法比较高大上而已，其实现方式很简单，就是在需要的时候再给图片的src属性赋值，仅此而已。
3.代码实现
|
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
|
/** * 图片懒加载 */function ImgLazyLoad() { /** * 滚动到图片所在位置再加载 * @param imgId * 懒加载图片的ID * @param imgSrc * 懒加载图片的地址 * @param distance * 图片的可视距离（这个参数可以不传） */ this.scrollLoad = function(imgId,imgSrc,distance) { // 获取该图片的src var img_source = $('#' + imgId).attr('src'); // 只执行一次 if("" == img_source) { // 不滚动的情况下，网页的可见高度 var documentClientHeight = document.documentElement.clientHeight || window.innerHeight; // 获取该图片距离网页顶部的距离 var imgOffsetTop = $('#' + imgId)[0].offsetTop; // 获取网页的可见高度 // var bodyClientHeight = document.body.clientHeight; // 1.网页高度<小于网页可视区域的高度(imgOffsetTop < documentClientHeight)，就不会发生滚动事件 if (imgOffsetTop < documentClientHeight) { $('#' + imgId)[0].src = imgSrc; return; } // 获取屏幕高度 //var screenHeight = window.screen.height; // 图片距离网页左上角的纵向偏移距离（距离网页顶部的距离） var max_imgClientTop = $('#' + imgId)[0].getBoundingClientRect().top; // ie下带有小数，所以只取整数 max_imgClientTop = parseInt(max_imgClientTop); // 图片可视距离（还差多少可以被看见） var max_imgClientDistance = max_imgClientTop - documentClientHeight; //0<= distance <=max_imgClientDistance // 1.参数不存在时，设值=0;(图片刚从可视区域最底部出现时，距离达到最小)distance→→Min=0 // 2.参数>网页可见高度时，设值=可视区域高度;(不滚动时，距离达到最大)distance→→Max=max_imgClientDistance,scrollTop=0 distance = ((distance || 0)>max_imgClientDistance)?max_imgClientDistance:distance; // 2.最大距离时，无滚动 if (distance == max_imgClientDistance) { $('#' + imgId)[0].src = imgSrc; return; } // 页面绑定滚动事件 $(document).scroll(function(){ // 获取网页被卷高度 // var scrollTop = document.body.scrollTop || document.documentElement.scrollTop; // 距离网页最顶部的距离 var imgClientTop = $('#' + imgId)[0].getBoundingClientRect().top; // 图片的可视高度 var clientHeight = documentClientHeight - imgClientTop; // 到达指定距离差或者图片已经进入视野范围 if (-clientHeight <= distance || documentClientHeight >= imgClientTop) { $('#' + imgId)[0].src = imgSrc; } }); } }; /** * 通过单击别的元素时再加载 * @param clickId * 被绑定单击事件的页面元素ID * @param imgId * * @param imgSrc * 懒加载图片的地址 */ // this.clickLoad = function(clickId,imgId,imgSrc) { // 获取该图片的src var img_source = $('#' + imgId).attr('src'); // 只执行一次 if("" == img_source) { // 绑定单击事件 $('#' + clickId).click(function(){ $('#' + imgId)[0].src = imgSrc; }); } };}; |
调用：
|
1
2
3
4
5
6
|
$(function() { // 实例化对象 var ill = new ImgLazyLoad(); // 调用 ill.scrollLoad('aa','http://files.cnblogs.com/files/Marydon20170307/ws_products.bmp',404);}); |
4.涉及知识点
网上也有很多实现方法，但是不能自定义设置加载图片的时机，为了实现这一点，花了不少功夫才搞好。
代码很短，但是涉及的知识点很多。
|
1
2
3
4
5
6
7
8
9
10
11
|
// 获取的是网页的可视区域的高度（不滚动的情况下）document.documentElement.clientHeight || window.innerHeight// 获取的是网页的可见高度（除去隐藏元素的高度）document.body.clientHeight// 获取的是显示屏的高度window.screen.height// 获取网页的被卷高度（ie下不支持前者获取方式）document.body.scrollTop || document.documentElement.scrollTop // 获取指定元素距离网页顶部的距离（静态死值）document.getElementById('#id').offsetTopdocument.getElementById('#id').getBoundingClientRect().top |
以上就是js 图片懒加载的实现的详细内容，更多关于js 图片懒加载的资料请关注服务器之家其它相关文章！
原文链接：https://www.cnblogs.com/Marydon20170307/p/8830021.html
