本文目的

主要介绍hexo-lazyload-image（图片懒加载）插件引发的bug以及相关API

问题描述

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

img

定位原因

为了提升网页的浏览体验，开启了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，即当前屏幕的区域。