-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathlazyLoad.html
82 lines (82 loc) · 4.48 KB
/
lazyLoad.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="height: 600px"></div>
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1585213010826&di=2127bf1b55564b0b95d91cf779f1b6b3&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F015e9b5786f9290000018c1b3e3eb8.gif" lazy="http://t7.baidu.com/it/u=378254553,3884800361&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg?sec=1585807356&t=0a1ff5306307caf4448b15a084b9b0fe" />
<div style="height: 600px"></div>
<div style="height: 600px"></div>
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1585213010826&di=2127bf1b55564b0b95d91cf779f1b6b3&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F015e9b5786f9290000018c1b3e3eb8.gif" lazy="http://t8.baidu.com/it/u=3571592872,3353494284&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg?sec=1585807356&t=789f1a12b9d4c6a91293d7a2321f17f1" />
<div style="height: 600px"></div>
<div style="height: 600px"></div>
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1585213010826&di=2127bf1b55564b0b95d91cf779f1b6b3&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F015e9b5786f9290000018c1b3e3eb8.gif" lazy="http://t7.baidu.com/it/u=3616242789,1098670747&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg?sec=1585807356&t=6077736ef2249ef04a6de626020623ed" />
<div style="height: 600px"></div>
<div style="height: 600px"></div>
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1585213010826&di=2127bf1b55564b0b95d91cf779f1b6b3&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F015e9b5786f9290000018c1b3e3eb8.gif" lazy="http://t8.baidu.com/it/u=1484500186,1503043093&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg?sec=1585807356&t=1d19bbde1f0d9feb65887c87a9178fa8" />
<div style="height: 600px"></div>
<div style="height: 600px"></div>
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1585213010826&di=2127bf1b55564b0b95d91cf779f1b6b3&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F015e9b5786f9290000018c1b3e3eb8.gif" lazy="http://t7.baidu.com/it/u=378254553,3884800361&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg?sec=1585807356&t=0a1ff5306307caf4448b15a084b9b0fe" />
<div style="height: 600px"></div>
<script>
/**
* 图片懒加载
* @param {object} params 传参对象
* @param {number} params.toBottom 距离底部像素加载开始加载（可选）
* @param {string} params.errorImage 加载失败时显示的图片路径（可选）
* @param {string} params.lazyAttr 自定义加载的属性（可选）
* @param {number} params.interval 函数节流间隔`毫秒`为单位（可选）
* @param {Function} callback 全部加载完回调（可选）
*/
function lazyLoad(params, callback) {
const doc = document;
/** 懒加载属性类型 */
const attr = params.lazyAttr || 'lazy';
/** 函数节流间隔 */
const space = params.interval || 100;
/** 距离底部距离 */
let offset = params.toBottom || 0;
/** 上一次代码执行时间（节流用） */
let before = 0;
/**
* 加载图片
* @param {HTMLImageElement} el 图片节点
*/
function loadImage(el) {
/** 缓存当前 src 加载失败时候用 */
const cache = el.src;
el.src = el.getAttribute(attr);
el.removeAttribute(attr);
// 图片加载失败
el.onerror = function () {
el.src = params.errorImage || cache;
}
}
/** 判断监听图片加载 */
function judgeImages() {
const now = Date.now();
if (now - before < space) return;
before = now;
const images = doc.querySelectorAll(`[${attr}]`);
const viewHeight = window.innerHeight || doc.documentElement.clientHeight;
if (images.length) {
for (let i = 0; i < images.length; i++) {
const imageTop = images[i].getBoundingClientRect().top;
if (imageTop <= viewHeight - Math.floor(offset)) {
loadImage(images[i]);
}
}
} else {
window.removeEventListener('scroll', judgeImages);
if (typeof callback === 'function') callback();
}
}
judgeImages();
window.addEventListener('scroll', judgeImages);
}
lazyLoad({space:5000});
</script>
</body>
</html>