干货时刻

本文主要介绍hexo-lazyload-image插件引发的bug以及相关API

问题描述

笔者最近在折腾hexo搭建的个人主页：东曜说 的时候，遇到了这样一个 bug：

网站开启图片懒加载后，首次加载页面图片不显示，但是刷新一次后会显示。

我的插件版本是：hexo-lazyload-image v1.0.10 。

问题原因

笔者为了提升网页的浏览体验，开启了pjax优化，其原理在于pjax封装了ajax实现局部刷新，将网站变成了单页面应用。

懒加载插件如果配置不当，将与pjax插件发生冲突，导致以上bug。

解决方法

找到hexo项目的根目录下的站点配置文件_config.yml，具体路径：blog/_config.yml，其中blog是你的项目文件夹。

找到lazyload配置，添上isSPA: true字段即可。

lazyload:
  enable: true
  onlypost: false # optional
  loadingImg: # optional eg ./images/loading.gif
  isSPA: true # optional

知识扩展

我们来仔细研究一下hexo-lazyload-image 插件的API，它共有5个配置项：

lazyload:
  enable: true
  onlypost: false # optional
  loadingImg: # optional eg ./images/loading.gif
  isSPA: false # optional
  preloadRatio: 3 # optional, default is 1

• onlypost
  • true：只有路由页面或者文章的图片才会被懒加载。
  • false：除了站点背景图（如果有的话），整个站点的图片均会被懒加载。
• loadingImg：指定的话，加载自定义路径的图片用作文章图片加载时显示，不指定的话显示默认图片。
• isSPA
  • true：针对单页面应用，当滚动条滚动到图片位置时就会向后端请求图片
  • false：刷新才能请求图片
  • preloadRatio：在多少倍的可见区域时触发图片请求，默认为1，即当前屏幕的区域。