导航
导航
文章目录
  1. 懒加载的意义
  2. 懒加载实现方式
    1. 1、懒加载HTML约定
    2. 2、懒加载JavaScript实现

js实现图片懒加载

前言:最近面试都被问到了这个问题,所以在这里整理一波。

懒加载的意义

懒加载的主要目的是作为服务器前端的优化,减少请求数或延迟请求数,对服务器缓压。

预加载:提前加载好,缓存到本地,当需要的时候直接读取缓存,对服务器增压

懒加载实现方式

  • 第一种是纯粹的延迟加载,使用setTimeOut或setInterval进行加载延迟

  • 第二种是条件加载,符合某些条件,或触发了某些事件才开始异步下载

  • 第三种是可视区加载,即仅加载用户可以看到的区域,这个主要由监控滚动条来实现,一般会在距用户看到某图片前一定距离遍开始加载,这样能保证用户拉下时正好能看到图片

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

1、懒加载HTML约定

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

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

2、懒加载JavaScript实现

动态加载总共分为以下几个步骤:
1、添加页面滚动监听事件

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

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

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

3、判断该图片是否在当前窗口的可视区域内

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

到这一个简单的图片懒加载就写成了

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

支持一下
谢谢你请我吃糖果