Hexo是一个流行的静态博客生成器，而hexo-lazyload-image2则是一个让Hexo支持自动懒加载图片的npm包。本文将介绍hexo-lazyload-image2的使用方式。
准备工作
首先，需要在Hexo项目中安装hexo-lazyload-image2包。可以通过以下命令进行安装：
npm install hexo-lazyload-image2 --save
配置插件
安装完毕后，需要在Hexo项目的配置文件_config.yml中加入以下内容：
lazyload: enable: true // 开启懒加载 onlypost: false // 非文章页面不懒加载 loadingImg: /images/loading.gif // 图片加载中的占位图 errorImg: /images/error.png // 图片加载失败的占位图 qrcode: false // 禁用二维码图片懒加载 removeClass: true // 移除class原有的lazyload样式
以上是最简单配置，如果需要了解更详细的配置，可以进一步查阅官方文档。
在文章中使用
在markdown文章中正常使用HTML的img标签即可，如：
<img src="/images/cat.jpg" alt="cat">
懒加载会在页面滚动到图片所在位置时自动加载图片，无需额外添加任何代码。
示例代码
在Hexo项目中的_config.yml文件中增加如下配置：
lazyload: enable: true onlypost: false loadingImg: /loading.gif errorImg: /error.jpg qrcode: false removeClass: true
在markdown文章中增加如下代码：
<img src="/images/cat.jpg" alt="cat">
以上代码将启用懒加载，并在可视范围内加载图片，同时设置了加载中和加载失败时的占位图。
总结
hexo-lazyload-image2是一款非常好用且方便的npm包，能够帮助Hexo用户自动实现图片懒加载的效果。本文中介绍了下载、配置和使用步骤，并提供了示例代码。通过学习本文，读者可以更好地使用Hexo技术，提升博客页面的性能和用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/62119