图片延迟加载

延迟加载就是当真正需要的时候，才执行加载操作。

延迟加载作为Web前端性能优化的一种措施，已经越来越多的应用到各种程序中，而图片的延迟加载作为使用是最广泛的一种，更应该被我们掌握，今天我就给大家推荐几款很好用的Github图片延迟加载插件。

图片延迟加载

Echo.js

Echo.js 是一个独立的延迟加载图片的 JavaScript 插件，不依赖任何第三方库，作为网站的首页图片加载优化是一种很好的方法。

它的实现原理是当图片进入可视化区域时，改变图片的src属性，以一种异步的方式加载服务器端的图片。

• github地址

github地址如下图所示，目前已经有3000+的star，应该说是很火的一个项目了

github地址

• 引入js文件

引入echo.js文件

• 核心代码

在以下核心代码中，可以根据需求进行配置项的修改。由于事件是绑定在window上的，所以延迟加载会应用到所有的图片上。

核心代码

Lazyr.js

Lazyr.js是另一款用于图片延迟加载的Javascript插件，使用方法类似于echo.js

• github地址

以下是github地址，目前有5000+的star，比echo.js使用量还要大。

github地址

Lazyr.js的使用

在这里我们按照模块化方法进行使用。

• 安装和使用

通过npm install命令进行安装，通过import来引入进行使用。

安装与使用

• 配置选项

通过image的data属性进行配置项的设置，包括data-normal,data-retina,data-srcset，默认的配置如下图所示。

默认配置项

• 完整代码
  

在下列代码中包含了一些lazyr.js中的API，可以查看下文档。

引入，通用配置

添加回调函数

动态绑定至html元素

总结

今天这篇文章主要向大家介绍了两个好用的图片延迟加载插件，大家可以自己动手试试，可能你也会用得到噢。