在前端开发中，我们常常会需要懒加载图片。不仅提升了网页的加载速度，也可以减少网页带宽的占用。zhdsh-blazy 是一款轻量级的图片懒加载插件，可以很好地满足我们在项目中的需求。
安装
我们可以通过 npm 来安装 zhdsh-blazy，打开终端，输入以下命令：
$ npm install zhdsh-blazy --save
接着，在项目中引用 zhdsh-blazy：
import Blazy from 'zhdsh-blazy'
如何使用
使用 zhdsh-blazy 很简单。只需在图片的 src 属性前加上 data-src 属性，然后调用 Blazy 的构造函数进行初始化即可。
<img data-src="path/to/image.jpg" class="lazyload" />
const blazy = new Blazy()
其中，class 为 lazyload 用于初始化图片尺寸，可以根据实际情况进行调整。
可配置项
zhdsh-blazy 提供了一些可配置项，我们可以根据具体需求进行设置。
Success
设置图片加载成功时的回调函数。
const blazy = new Blazy({
success: (ele) => {
console.log('Success!')
}
})Error
设置图片加载失败时的回调函数。
const blazy = new Blazy({
error: (ele) => {
console.log('Error!')
}
})Offset
设置在视口范围内的加载偏移量，单位为像素。
const blazy = new Blazy({
offset: 100
})示例代码
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
--------------------------
-------
--------- -
------ -----
------- ------
----------------- --------
-
--------
-------
------
---- ----------------------------- ---------------- --
---- ----------------------------- ---------------- --
---- ----------------------------- ---------------- --
---- ----------------------------- ---------------- --
------- --------------
------ ----- ---- -------------
----- ----- - --- -------
------- ----
-------- ----- -- -
-----------------------
--
------ ----- -- -
---------------------
-
--
---------
-------
-------总结
zhdsh-blazy 作为一款轻量级的图片懒加载插件，使用简单，配置灵活。它可以很好地提升网页的加载速度，减轻网页带宽的负担。在实际项目中，我们可以根据需求对其进行调整和配置，以实现更好的效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005725681e8991b448e86d1