关注前端 | 前端博客
当前位置: JavaScript > JS-懒加载

JS-懒加载

2018-07-10 分类:JavaScript 作者:管理员 阅读(50)

1. 什么是懒加载?

懒加载也就是延迟加载。

1-1. 原理是什么?

先将img标签中的src链接设为同一张图片(空白图片),将其真正的图片地址存储再img标签的自定义属性中(比如data-src)。当js监听到该图片元素进入可视窗口时,即将自定义属性中的地址存储到src属性中,达到懒加载的效果。

这样做能防止页面一次性向服务器响应大量请求导致服务器响应慢,页面卡顿或崩溃等问题。

1-2. 为什么要使用懒加载?

很多页面,内容很丰富,页面很长,图片较多。比如说各种商城页面。这些页面图片数量多,而且比较大,少说百来K,多则上兆。要是页面载入就一次性加载完毕。估计就会流失大量用户。

1-3. 懒加载的原理是什么?

页面中的img元素,如果没有src属性,浏览器就不会发出请求去下载图片,只有通过javascript设置了图片路径,浏览器才会发送请求。

懒加载的原理就是先在页面中把所有的图片统一使用一张占位图进行占位,把正真的路径存在元素的“data-url”属性里,要用的时候就取出来,再设置;

1-4. 懒加载的实现步骤?

1) 首先,不要将图片地址放到src属性中,而是放到其它属性(data-original)中。
2) 页面加载完成后,根据scrollTop判断图片是否在用户的视野内,如果在,则将data-original属性中的值取出存放到src属性中。
3) 在滚动事件中重复判断图片是否进入视野,如果进入,则将data-original属性中的值取出存放到src属性中。

1-5. 懒加载的优点是什么?

页面加载速度快、可以减轻服务器的压力、节约了流量,用户体验好

2、预加载

2-1. 什么是预加载?

提前加载图片,当用户需要查看时可直接从本地缓存中渲染

2-2. 为什么要使用预加载?

图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度。这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速、无缝地发布,也可帮助用户在浏览你网站内容时获得更好的用户体验。

3-3. 实现预加载的方法有哪些?

方法一:用CSS和JavaScript实现预加载
方法二:仅使用JavaScript实现预加载
方法三:使用Ajax实现预加载

3、懒加载和预加载的对比

1)概念:
懒加载也叫延迟加载:JS图片延迟加载,延迟加载图片或符合某些条件时才加载某些图片。
预加载:提前加载图片,当用户需要查看时可直接从本地缓存中渲染。

2)区别:
两种技术的本质:两者的行为是相反的,一个是提前加载,一个是迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作用,预加载则会增加服务器前端压力。

3)懒加载的意义及实现方式有:
意义:
懒加载的主要目的是作为服务器前端的优化,减少请求数或延迟请求数。
实现方式:
1.第一种是纯粹的延迟加载,使用setTimeOut或setInterval进行加载延迟.
2.第二种是条件加载,符合某些条件,或触发了某些事件才开始异步下载。
3.第三种是可视区加载,即仅加载用户可以看到的区域,这个主要由监控滚动条来实现,一般会在距用户看到某图片前一定距离遍开始加载,这样能保证用户拉下时正好能看到图片。

4)预加载的意义及实现方式有:
意义:
预加载可以说是牺牲服务器前端性能,换取更好的用户体验,这样可以使用户的操作得到最快的反映。
实现方式:
实现预载的方法非常多,比如:用CSS和JavaScript实现预加载;仅使用JavaScript实现预加载;使用Ajax实现预加载。
常用的是new Image();设置其src来实现预载,再使用onload方法回调预载完成事件。只要浏览器把图片下载到本地,同样的src就会使用缓存,这是最基本也是最实用的预载方法。当Image下载完图片头后,会得到宽和高,因此可以在预载前得到图片的大小(方法是用记时器轮循宽高变化)。

不考虑节流的懒加载

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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport" />
  <title>lazyload</title>
</head>
<style>
body{
  margin: 0;
  padding: 0;
}
#container div {
   height: 200px;
    overflow: hidden;
    margin: auto;
}
img {
    width: 100%;
    height: 100%;
}
</style>
<body>
<div id="container">
    <div><img src="https://misc.360buyimg.com/mtd/pc/index_2017/2.1.0/static/images/lazyload.gif" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" /></div>
    <div><img src="https://misc.360buyimg.com/mtd/pc/index_2017/2.1.0/static/images/lazyload.gif" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" /></div>
    <div><img src="https://misc.360buyimg.com/mtd/pc/index_2017/2.1.0/static/images/lazyload.gif" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" /></div>
    <div><img src="https://misc.360buyimg.com/mtd/pc/index_2017/2.1.0/static/images/lazyload.gif" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" /></div>
    <div><img src="https://misc.360buyimg.com/mtd/pc/index_2017/2.1.0/static/images/lazyload.gif" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" /></div>
    <div><img src="https://misc.360buyimg.com/mtd/pc/index_2017/2.1.0/static/images/lazyload.gif" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" /></div>
    <div><img src="https://misc.360buyimg.com/mtd/pc/index_2017/2.1.0/static/images/lazyload.gif" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" /></div>
    <div><img src="https://misc.360buyimg.com/mtd/pc/index_2017/2.1.0/static/images/lazyload.gif" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" /></div>
    <div><img src="https://misc.360buyimg.com/mtd/pc/index_2017/2.1.0/static/images/lazyload.gif" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" /></div>
    <div><img src="https://misc.360buyimg.com/mtd/pc/index_2017/2.1.0/static/images/lazyload.gif" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" /></div>
    <div><img src="https://misc.360buyimg.com/mtd/pc/index_2017/2.1.0/static/images/lazyload.gif" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" /></div>
    <div><img src="https://misc.360buyimg.com/mtd/pc/index_2017/2.1.0/static/images/lazyload.gif" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" /></div>
    <div><img src="https://misc.360buyimg.com/mtd/pc/index_2017/2.1.0/static/images/lazyload.gif" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" /></div>
    <div><img src="https://misc.360buyimg.com/mtd/pc/index_2017/2.1.0/static/images/lazyload.gif" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" /></div>
    <div><img src="https://misc.360buyimg.com/mtd/pc/index_2017/2.1.0/static/images/lazyload.gif" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" /></div>
    <div><img src="https://misc.360buyimg.com/mtd/pc/index_2017/2.1.0/static/images/lazyload.gif" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" /></div>
    <div><img src="https://misc.360buyimg.com/mtd/pc/index_2017/2.1.0/static/images/lazyload.gif" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" /></div>
    <div><img src="https://misc.360buyimg.com/mtd/pc/index_2017/2.1.0/static/images/lazyload.gif" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" /></div>
    <div><img src="https://misc.360buyimg.com/mtd/pc/index_2017/2.1.0/static/images/lazyload.gif" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" /></div>
    <div><img src="https://misc.360buyimg.com/mtd/pc/index_2017/2.1.0/static/images/lazyload.gif" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" /></div>
    <div><img src="https://misc.360buyimg.com/mtd/pc/index_2017/2.1.0/static/images/lazyload.gif" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" /></div>
    <div><img src="https://misc.360buyimg.com/mtd/pc/index_2017/2.1.0/static/images/lazyload.gif" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" /></div>
    <div><img src="https://misc.360buyimg.com/mtd/pc/index_2017/2.1.0/static/images/lazyload.gif" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" /></div>
    <div><img src="https://misc.360buyimg.com/mtd/pc/index_2017/2.1.0/static/images/lazyload.gif" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" /></div>
    <div><img src="https://misc.360buyimg.com/mtd/pc/index_2017/2.1.0/static/images/lazyload.gif" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" /></div>
    <div><img src="https://misc.360buyimg.com/mtd/pc/index_2017/2.1.0/static/images/lazyload.gif" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" /></div>
    <div><img src="https://misc.360buyimg.com/mtd/pc/index_2017/2.1.0/static/images/lazyload.gif" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" /></div>
    <div><img src="https://misc.360buyimg.com/mtd/pc/index_2017/2.1.0/static/images/lazyload.gif" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" /></div>
    <div><img src="https://misc.360buyimg.com/mtd/pc/index_2017/2.1.0/static/images/lazyload.gif" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" /></div>
</div>  
</body>
<script>

var imgs=document.querySelectorAll('img');

//首次执行
update()

//滚动时遍历每个img是否在可视区内,是即可用真正的地址换掉src的默认地址
window.onscroll=function(){
  update()
}
//对图片进行处理操作
function update(){
  for(var i=0;i<imgs.length;i++){
    if(isVisible(i)){
      imgs[i].src = imgs[i].getAttribute("data-src");
    }
  }
}
//判断元素是否出现在可视范围内
function isVisible(i){
    var img = imgs[i];
    scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    scrollBottom = scrollTop + document.documentElement.clientHeight;
    imgTop = pageY(img);
    imgBottom = imgTop + img.offsetHeight;
    if((imgTop > scrollTop && imgTop < scrollBottom) || (imgBottom > scrollTop && imgBottom < scrollBottom)) {
        return true;
    } else {
        return false;
    }
}
//获取图片距离页面顶部距离
function pageY(ele) {
    if(ele.offsetParent) {
        return ele.offsetTop + pageY(ele.offsetParent);
    } else {
        return ele.offsetTop;
    }
}
</script>
</html>

考虑节流的懒加载

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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport" />
<title>lazyload</title>
<style>
#container div {
   width: 300px;
    height: 200px;
    overflow: hidden;
    margin: auto;
}
img {
    width: 100%;
    height: 100%;
}
</style>
</head>
<body>
<div id="container">
    <div><img src="https://misc.360buyimg.com/mtd/pc/index_2017/2.1.0/static/images/lazyload.gif" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" /></div>
    <div><img src="https://misc.360buyimg.com/mtd/pc/index_2017/2.1.0/static/images/lazyload.gif" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" /></div>
    <div><img src="https://misc.360buyimg.com/mtd/pc/index_2017/2.1.0/static/images/lazyload.gif" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" /></div>
    <div><img src="https://misc.360buyimg.com/mtd/pc/index_2017/2.1.0/static/images/lazyload.gif" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" /></div>
    <div><img src="https://misc.360buyimg.com/mtd/pc/index_2017/2.1.0/static/images/lazyload.gif" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" /></div>
    <div><img src="https://misc.360buyimg.com/mtd/pc/index_2017/2.1.0/static/images/lazyload.gif" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" /></div>
    <div><img src="https://misc.360buyimg.com/mtd/pc/index_2017/2.1.0/static/images/lazyload.gif" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" /></div>
    <div><img src="https://misc.360buyimg.com/mtd/pc/index_2017/2.1.0/static/images/lazyload.gif" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" /></div>
    <div><img src="https://misc.360buyimg.com/mtd/pc/index_2017/2.1.0/static/images/lazyload.gif" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" /></div>
    <div><img src="https://misc.360buyimg.com/mtd/pc/index_2017/2.1.0/static/images/lazyload.gif" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" /></div>
    <div><img src="https://misc.360buyimg.com/mtd/pc/index_2017/2.1.0/static/images/lazyload.gif" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" /></div>
    <div><img src="https://misc.360buyimg.com/mtd/pc/index_2017/2.1.0/static/images/lazyload.gif" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" /></div>
    <div><img src="https://misc.360buyimg.com/mtd/pc/index_2017/2.1.0/static/images/lazyload.gif" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" /></div>
    <div><img src="https://misc.360buyimg.com/mtd/pc/index_2017/2.1.0/static/images/lazyload.gif" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" /></div>
    <div><img src="https://misc.360buyimg.com/mtd/pc/index_2017/2.1.0/static/images/lazyload.gif" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" /></div>
    <div><img src="https://misc.360buyimg.com/mtd/pc/index_2017/2.1.0/static/images/lazyload.gif" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" /></div>
    <div><img src="https://misc.360buyimg.com/mtd/pc/index_2017/2.1.0/static/images/lazyload.gif" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" /></div>
    <div><img src="https://misc.360buyimg.com/mtd/pc/index_2017/2.1.0/static/images/lazyload.gif" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" /></div>
    <div><img src="https://misc.360buyimg.com/mtd/pc/index_2017/2.1.0/static/images/lazyload.gif" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" /></div>
    <div><img src="https://misc.360buyimg.com/mtd/pc/index_2017/2.1.0/static/images/lazyload.gif" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" /></div>
    <div><img src="https://misc.360buyimg.com/mtd/pc/index_2017/2.1.0/static/images/lazyload.gif" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" /></div>
    <div><img src="https://misc.360buyimg.com/mtd/pc/index_2017/2.1.0/static/images/lazyload.gif" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" /></div>
    <div><img src="https://misc.360buyimg.com/mtd/pc/index_2017/2.1.0/static/images/lazyload.gif" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" /></div>
    <div><img src="https://misc.360buyimg.com/mtd/pc/index_2017/2.1.0/static/images/lazyload.gif" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" /></div>
    <div><img src="https://misc.360buyimg.com/mtd/pc/index_2017/2.1.0/static/images/lazyload.gif" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" /></div>
    <div><img src="https://misc.360buyimg.com/mtd/pc/index_2017/2.1.0/static/images/lazyload.gif" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" /></div>
    <div><img src="https://misc.360buyimg.com/mtd/pc/index_2017/2.1.0/static/images/lazyload.gif" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" /></div>
    <div><img src="https://misc.360buyimg.com/mtd/pc/index_2017/2.1.0/static/images/lazyload.gif" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" /></div>
    <div><img src="https://misc.360buyimg.com/mtd/pc/index_2017/2.1.0/static/images/lazyload.gif" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" /></div>
</div>
<script>
"use strict;"
//浅拷贝方法
var extend = function(c, p) {
    for(var k in p) {
        c[k] = p[k];
    }
    return c;
}
//节流方法
var throttle = function() {
    //两个变量:isClear的值为第一个形参,fn为默认的undefined
    var isClear = arguments[0],fn;
    //如果第一个形参是flase或者true
    if(typeof isClear === "boolean") {
        //第二个形参赋值给fn
        fn = arguments[1];
        //fn下面存在timer属性的话,就清除定时器
        //在这里,timer其实就是定时器的名字
        fn.timer && clearTimeout(fn.timer);
    } else {//如果如果第一个形参不是flase或者true

        //第一个形参赋值给fn
        fn = isClear;
        //如果第二个形参存在就赋值给param,否则就是默认值[]
        var param = arguments[1] || [];
        //返回继承后对象p
        var p = extend({
            context: null,
            args: [],
            time: 30
        }, param);
        //也可以throttle(true, fn);arguments.callee指向throttle函数
        arguments.callee(true, fn);
        //fn下面添加一个为timer的定时器
        fn.timer = setTimeout(function() {
            fn.apply(p.context, p.args)
        }, p.time)
    }
}
var Lazyload = function(id) {
    this.container = document.getElementById(id);
    this.imgs = this.getImgs();
    this.init();
}
Lazyload.prototype = {
    //初始化
    init: function() {
        this.update(); //进行首次图片位置判断
        this.bindEvent(); //添加事件
    },
    //获取图片数据
    getImgs: function() {
        var arr = [];
        var imgs = this.container.querySelectorAll('img');
        for(var i = 0, len = imgs.length; i < len; i++) {
            arr.push(imgs[i]);
        }
        return arr;
    },
    //对图片进行处理操作
    update: function() {
        if(!this.imgs.length) return;
        var i = this.imgs.length;
        for(i--; i >= 0; i--) {
            if(this.shouldShow(i)) {
                this.imgs[i].src = this.imgs[i].getAttribute("data-src");
                this.imgs.splice(i, 1);
            }
        }
    },
    //判断图片位置
    shouldShow: function(i) {
        var img = this.imgs[i];
        scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        scrollBottom = scrollTop + document.documentElement.clientHeight;
        imgTop = this.pageY(img);
        imgBottom = imgTop + img.offsetHeight;
        if((imgTop > scrollTop && imgTop < scrollBottom) || (imgBottom > scrollTop && imgBottom < scrollBottom)) {
            return true;
        } else {
            return false;
        }
    },
    //获取图片距离页面顶部距离
    pageY: function(ele) {
        if(ele.offsetParent) {
            return ele.offsetTop + this.pageY(ele.offsetParent);
        } else {
            return ele.offsetTop;
        }
    },
    //绑定事件
    bindEvent: function() {
        var that = this;
        that.on(window, "scroll", function() {
            throttle(that.update, {
                context: that
            })
        });
        that.on(window, function() {
            throttle(that.update, {
                context: that
            })
        })
    },
    //监听
    on: function(ele, type, fn) {
        if(ele.addEventListener) {
            ele.addEventListener(type, fn, false)
        } else {
            ele.attachEvent("on" + type, fn)
        }
    }
}
window.onload = function() {
    new Lazyload("container")
}
</script>
</body>
</html>

「两年博客,如果觉得我的文章对您有用,请帮助本站成长」

赞(2) 打赏

感谢您让我添加个鸡腿!

支付宝
微信
2

感谢您让我添加个鸡腿!

支付宝
微信

上一篇:

下一篇:

共有 0 条评论 - JS-懒加载

博客简介

一位不知名的前端工程师,专注全栈技术,分享各种所遇问题与个人心得,梦想成为一位知名大神!

最近更新

精彩评论

服务热线:
 177****6038

 QQ在线交流

 旺旺在线