解决了hexo开启懒加载后图片无法立即显示的问题

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

问题描述

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

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

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

问题原因

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

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

解决方法

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

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

1
2
3
4
5
6
lazyload:
  enable: true
  onlypost: false # optional
  loadingImg: # optional eg ./images/loading.gif
  isSPA: true # optional

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