在我们的日常开发工作中，图片是一个很重要的展示组件，但是加载时间长、数量过多会影响页面的性能，这时候就需要使用图片懒加载技术，这不仅可以减少页面请求，还能提升页面交互体验。今天我们要介绍的就是npm包lazyload.js的使用教程。
lazyload.js简介
lazyload.js是一个基于JS的图片懒加载库，可以有效的动态加载页面图片，减小页面体积，提高网站性能。它可以无依赖的与jQuery、Zepto、angular、React等框架搭配使用。
安装
你可以通过npm进行安装，也可以通过直接使用CDN。
npm安装
npm install @tnfe/lazyload
CDN引入
<script src="https://cdn.jsdelivr.net/npm/@tnfe/lazyload@1.0.0/dist/lazyload.min.js"></script>
使用
该库的使用非常简单，只需要引入lazyload.js文件，然后为要懒加载的图片设置data-src即可。
<img src="default.png" data-src="lazy.png" class="lazyload" />
import LazyLoad from '@tnfe/lazyload';
new LazyLoad('.lazyload');配置项
lazyload.js提供了一些配置项，可以根据实际情况按需使用。
| 配置项 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| threshold | number | 0 | 提前加载距离，单位为像素 |
| effect | string | 'show' | 图片加载效果方式，可选项：show、opacity、transition |
| effectTime | number | 0 | 图片加载效果时间，当effect为transition时生效，单位为毫秒 |
| placeholder | string | data:image/png;base64,iVBORw0KGg... | 默认占位图片 |
| loading | Function | 无 | 图片加载中回调函数 |
| success | Function | 无 | 图片加载成功回调函数 |
| error | Function | 无 | 图片加载失败回调函数 |
例如，我们可以将loading的回调函数设置为我们需要的效果。
-- -------------------- ---- -------
----- ------- - -
------- -------
----------- ----
---------- ----
-------- -------------- -
------------------ - ----
--------------------- - -------- -----
--
-------- -------------- -
------------------ - ----
--------------------- - -------- -----
-
-
--- --------------------- ---------结语
lazyload.js是一个非常实用的图片懒加载库，在前端开发中的应用非常广泛。本篇文章对lazyload.js的使用教程进行了详细介绍，希望能够帮助读者更好的了解和使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005601481e8991b448de1d5