图片懒加载原理

发表于 | 分类于 |

为了提高用户体验和减小服务器的压力，也同时减少客户端和服务器端的流量的浪费，项目中会使用图片懒加载。之前一只用的 jQuery 的图片懒加载的插件。今天我们就来分析一下图片懒加载的原理。

懒加载是什么

图片的懒加载就是，在用户没有看到的地方的图片预先不会加载，而当用户浏览到图片时，图片才会加载出来。这样做的目的就是减小服务器的压力，同时可以为用户和服务器节省流量，避免不必要的浪费。

原理分析

既然我们知道了要再图片在可是区域的时候显示，那么流程应该如下：

监听页面滚动 =》 判断图片是否出现在可视区域 =》 出现则加载图片

看起来很简单吧。下面就看看实际代码。

代码分析

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
//立即执行函数
(function () {
	let imgList = [],
		delay,
		time = 250,
		offset = 0;
	//函数节流
	function _delay() {
		clearTimeout(delay);
		delay = setTimeout(() => {
			_loadImg();
		}, time);
	}
	//执行图片加载
	function _loadImg() {
		for (let i = 0, len = imgList.length; i < len; i++) {
			if (_isShow(imgList[i])) {
				imgList[i].src = imgList[i].getAttribute("data-src");
				imgList.splice(i, 1);
			}
		}
	}
	//判断img是否出现在可视窗口
	function _isShow(el) {
		let coords = el.getBoundingClientRect();
		return (
			(coords.left >= 0 && coords.left >= 0 && coords.top) <=
			(document.documentElement.clientHeight || window.innerHeight) +
				parseInt(offset)
		);
	}
	//获取所有需要实现懒加载图片对象引用并设置window监听事件scroll
	function imgLoad(selector) {
		_selector = selector || ".imgLazyLoad";
		let nodes = document.querySelectorAll(selector);
		imgList = Array.apply(null, nodes);
		window.addEventListener("scroll", _delay, false);
	}
	imgLoad(".imgLazyLoad");
})();

代码也很简单，就不多说了。需有注意的是“函数节流”，这是个什么东西呢，一下也讲不清楚。这里给大家推荐一篇文章高性能滚动 scroll 及页面渲染优化,相信你看了一定会有所收获。

[越努力，越幸运！]