ES6实现一个图片懒加载类

2018/11/21 16:40 分类：技术交流浏览：34

当前端在一个网页中，请求很多的图片时，众所周知，图片资源比较大，请求对太多对服务器的压力比较大，所以我们会用到图片懒加载技术，特别是移动端，移动端资源和网络环境都不比pc端，而移动端很多布局都是列表形式的，会涉及到很多图片列表，如果一次加载，会造成加载很慢的情况。

当然，现在懒加载的第三方资源比较多，jquery的有lazyload.js，vue也有第三方模块vue-lazyload 等，但是很多同学只会用现成的，不知道其中的原理，那么今天来教大家自己动手使用原生JavaScript实现懒加载功能。

首先，我们需要准备一个来使用懒加载的页面，页面代码如下：

页面中所有的图片的src属性都为空，取而代之，使用data-src属性，写上需要加载的图片的路径url，我们只需要在懒加载的代码中，当符合条件的时候，把src属性的值替换成对应的data-src属性的值即可。

那么，接下来，我们引入自己实现的懒加载类的JavaScript代码。如下：

首先，我们需要在类LazyLoad的构造器中，获取当前屏幕可视窗口的高度，如果是主流浏览器的话，只需要window.innerHeight即可，考虑兼容IE，还得需要兼容性写法，如：

document.documentElement .clientHeight 和 document.body.clientHeight,。完成这一步后，

我们直接调用初始化方法 init(); 代码如下：

那么接下来，我们再init()方法中，获取所有的图片，获取结果是一个数组，然后循环这个图片数组，获取每一张图片上下边框，到当前可视窗口的位置，缓存在变量里面，获取图片上下边框分别到上下可视窗口的距离，调用getClientRect方法, 代码如下:

其中变量imgTop为图片上边框，到当前可视窗口上边的距离，imgBottom为当前图片下边框，到当前可视窗口下边的距离，getClientRect（）方法的具体实现细节如下。

那么，最后，就比较简单了，只需要判断图片是否出现在当前可视范围之内，如果出现在当前可视窗口的范围之内，就加载图片（即把src属性替换成对应的data-src属性），

如果不在，就不加载，那么判断的条件就是两个：图片的上边进入窗口的范围或图片的下边进入窗口的范围，具体实现代码如下：

如果上边大于0且小于当前可视窗口高度或者下边大于0且小于当前可视窗口高度，那么就是图片进入了可视窗口范围，需要加载。

最后，在页面里面，当页面加载或页面重置尺寸或页面页面滚动的时候，创建实例化一个懒加载对象，即实现功能，代码如下：

最后我们看一下初始化的时候，只有三张图片在当前可视区域范围之内，只加载了三张图片，当鼠标往下滚动，进入窗口的图片都会被逐一加载进来，没有进入当前窗口范围的图片，都不会被加载，至此，我们实现了图片懒加载类。

#标签：ES6，图片，懒加载类