实现图片懒加载

Posted 2020-08-21 卢沟晓月前端之路

 

Web 图片的懒加载就是通过读取img元素，然后获得img元素的data-src（也可以约定为其他属性名）属性的值，并赋予img的src，从而实现动态加载图片的机制。

这里需要注意的是： img在初始化的时候不要设置src属性，因为即使设置 src=‘‘ 浏览器也会尝试加载图片。

一个简单的图片懒加载共涉及两个方面，

1. html 约定

我们首先需要给准备实施懒加载的img元素添加指定的class 这里为m-lazyload ,同时将img src赋值给 data-src属性。
具体示例为：

1. <img class="m-lazyload" data-src="imgUrl">

2. javascript 实现

动态加载总共分为以下几个步骤，这里每个步骤都将被拆分为独立的函数

1. 添加页面滚动监听事件

1. window.addEventListener(‘scroll‘, _delay, false);
2.  
3. function _delay() {
4. clearTimeout(delay);
5. delay = setTimeout(function () {
6. _loadImage();
7. }, time);
8. }

2. 当触发监听事件时会执行 _loadImage 函数，该函数负责加载图片

1. function _loadImage() {
2. for (var i = imgList.length; i--;) {
3. var el = imgList[i];
4. if (_isShow(el)) {
5. el.src = el.getAttribute(‘data-src‘);
6. el.className = el.className.replace(new RegExp("(\\s|^)" + _selector.substring(1, _selector.length) + "(\\s|$)"), " ");
7. imgList.splice(i, 1);
8. }
9. }
10. }

虽然执行了_loadImage函数，但是我们得知道哪些图片需要被加载，这里的判断依据是什么呢？

依据就是判断该图片是否在当前窗口的可视区域内，在这里我们封装一个_isShow函数来实现

1. function _isShow(el) {
2. var coords = el.getBoundingClientRect();
3. return ( (coords.top >= 0 && coords.left >= 0 && coords.top) <= (window.innerHeight || document.documentElement.clientHeight) + parseInt(offset));
4. }

自此一个图片加载的闭环就形成了

当网页滚动的事件被触发 -> 执行加载图片操作 -> 判断图片是否在可视区域内 -> 在，则动态将data-src的值赋予该图片。

太简单了？

事实就是如此！！！

如此简单，不妨扩展一下

1. 添加一些自定义参数，谁都喜欢自定义，不是吗？
2. 支持iScroll, iScroll是一个高性能，资源占用少，无依赖，多平台的javascript滚动插件。

这里我们做了些优化

1. 图片加载后移除选择器，避免重复判断。
2. 缓存img元素结合，减少dom元素查询性能损耗
3. 扩展prototype添加getNode方法，支持分页数据懒加载（由于我们之前缓存了dom元素）

OK！说了这么多，show me the code 吧！

1. (function () {
2. var imgList = [], // 页面所有img元素集合
3. delay, // setTimeout 对象
4. offset, //偏移量，用于指定图片距离可视区域多少距离，进行加载
5. time, // 延迟载入时间
6. _selector; // 选择器 默认为 .m-lazyload
7.  
8. function _isShow(el) {
9. var coords = el.getBoundingClientRect();
10. return ( (coords.top >= 0 && coords.left >= 0 && coords.top) <= (window.innerHeight || document.documentElement.clientHeight) + parseInt(offset));
11. }
12.  
13. function _loadImage() {
14. for (var i = imgList.length; i--;) {
15. var el = imgList[i];
16. if (_isShow(el)) {
17. el.src = el.getAttribute(‘data-src‘);
18. el.className = el.className.replace(new RegExp("(\\s|^)" + _selector.substring(1, _selector.length) + "(\\s|$)"), " ");
19. imgList.splice(i, 1);
20. }
21. }
22. }
23.  
24. function _delay() {
25. clearTimeout(delay);
26. delay = setTimeout(function () {
27. _loadImage();
28. }, time);
29. }
30.  
31. function ImageLazyload(selector, options) {
32. var defaults = options || {};
33. offset = defaults.offset || 0;
34. time = defaults.time || 250;
35. _selector = selector || ‘.m-lazyload‘;
36. this.getNode();
37. _delay();//避免首次加载未触发touch事件,主动触发一次加载函数
38. if (defaults.iScroll) {
39. defaults.iScroll.on(‘scroll‘, _delay);
40. defaults.iScroll.on(‘scrollEnd‘, _delay);
41. } else {
42. window.addEventListener(‘scroll‘, _delay, false);
43. }
44. }
45. ImageLazyload.prototype.getNode = function () {
46. imgList = [];
47. var nodes = document.querySelectorAll(_selector);
48. for (var i = 0, l = nodes.length; i < l; i++) {
49. imgList.push(nodes[i]);
50. }
51. };
52. })();

来源： 实现一个图片懒加载插件有多难？ – 前端有多难？ – SegmentFault