?
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
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
  
 
[转载出处]:http://www.cnblogs.com/Leawee/p/4533289.html
 
js实现懒惰加载
HTML代码:
 
复制代码
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>lazyload-Leawee</title>
</head>
<body>    <img class="lazy" src="img/HBuilder.png"
               data-src="http://www.baidu.com/img/baidu_jgylogo3.gif?v=32804268.gif"/>
<br/>
<img src="img/HBuilder.png" data-src="img/微信加关注.jpg" class="lazy"/>
<br/>
<img src="img/HBuilder.png" data-src="img/2008年作品.jpg" class="lazy"/>
<br/>
<img src="img/HBuilder.png" data-src="img/2009年作品.jpg" class="lazy"/>
 
</body>
</html>
复制代码
js代码:
 
复制代码
<script type="text/javascript">
    var imgs = document.getElementsByClassName("lazy");
    /*懒惰加载图片*/
    var imgsLen = imgs.length;
    var unloaded = imgsLen;
    /*标记还有多少个图片没有加载*/
    var clientHight = window.innerHeight || document.documentElement.clientHeight;
    /*浏览器用户可视窗口高度*/
 
    /*给图片设置真正的src*/
    function setImgSrc(index) {
        imgs[index].src = imgs[index].getAttribute("data-src");
        /*取图片真正的地址*/
        --unloaded;
    }
 
    /*滚动事件处理*/
    function scrollHandler(index) {
        var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
        /*滚动离顶部距离*/
        for (var i = index; i < imgsLen; i++) {
            var offset = imgs[i].offsetTop;
            /*元素到顶部的偏移量*/
            if (scrollTop + clientHight > offset) {
                setImgSrc(i);
            else {
                break;
            }
        }
    }
 
    /*监听滚动事件*/
    function myScrollListener() {
        var start = imgsLen - unloaded;
        /*查找第一个没有加载的图片的位置*/
        if (unloaded > 0) {
            scrollHandler(start);
        }
    }
 
    /*第一次加载加载页面的时候加载出现在用户视线里的图片*/
    function firstLoad() {
        for (var i = 0; i < imgsLen; i++) {
            var top = imgs[i].offsetTop;
            if (top < clientHight) {/*图片到顶部的位置如果小于客户端可视窗口的高度,则说明图片显示出来了*/
                setImgSrc(i);
            else {
                break;
            }
        }
    }
 
    window.onscroll = myScrollListener;
 
    window.onload = firstLoad;
 
 
</script>
复制代码
上面代码已经完全可以实现web的懒惰记载了。
 
 
扩展:如果数据是分页的话,比如第一次加载100条,第二页又记载100条这样,可以像如下方式实现:
 
HTML如下:
 
 
复制代码
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>lazyload-Leawee</title>
</head>
 
<body>
<div id="list">
    <img class="lazy" src="img/aaa.png" data-src="http://www.baidu.com/img/baidu_jgylogo3.gif?v=32804268.gif"/>
    <br/>
    <img src="img/aaa.png" data-src="img/1登录界面.png" class="lazy"/>
    <br/>
    <img src="img/aaa.png" data-src="img/close.png" class="lazy"/>
    <br/>
    <img src="img/aaa.png" data-src="http://css16.tel.cdndm.com/v201511201052/default/images/logo.gif" class="lazy"/>
    <br/>
</div>
<button onclick="nextPage()">加载</button>
</body>
 
</html>
<script src="js/lazyloadimg.js" type="text/javascript" charset="utf-8"></script>
复制代码
 
JS代码如下:
 
复制代码
<script type="text/javascript">
    window.onscroll = myScrollListener;
    window.onload = firstLoad;
 
    function nextPage() {
            "https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=1889789971,2360758735&fm=58",
            "img/1登录界面.png",
        ];
        for (var i = 0; i < newImgs.length; i++) {
            var li = document.createElement("img");
            li.setAttribute("src""img/close.png");//设置默认图片
            li.setAttribute("data-src", newImgs[i]);//设置真是图片地址
            li.setAttribute("class""lazy");      //设置延迟加载类
            document.getElementById("list").appendChild(li);//把新图片元素添加到UI图片列表里
        }
        imgs = document.getElementsByClassName(".lazy");
        /*懒惰加载图片*/
        imgsLen = imgs.length;
        unloaded = unloaded + newImgs.length;
        /*标记还有多少个图片没有加载*/
        nextOnLoad();
    }
 
    //加载下一页首次加载图片显示
    function nextOnLoad() {
        var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
        /*滚动离顶部距离*/
        for (var i = imgsLen - unloaded; i < imgsLen; i++) {
            var offset = imgs[i].offsetTop;
            /*元素到顶部的偏移量*/
            if (scrollTop + clientHight > offset) {
                setImgSrc(i);
            else {
                break;
            }
        }
    }
</script>
 
 
 
  

 

---------------------------------------------------------------------------------------------
唯有志存高远,方能风行天下。

道之所存,虽千万人吾往矣! 情之所钟,虽千万里吾念矣~

原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 、作者信息和本声明。否则将追究法律责任。