专栏首页赵俊的Java专栏Hexo 优化 --- lazyload 图片懒加载

Hexo 优化 --- lazyload 图片懒加载

前言

Hexo 博客虽然功能很强大,但也越来越繁重了,访问速度上有了一些问题,这里我也考虑了许多,例如加 cdn,将国外的资源引用改为国内镜像等方式。今天又想到如果一个页面的图片很多,那么如何来提高博客的访问速度呢?。

经过一番寻找之后,找到一个方案,就是懒加载,通俗点讲就是当你翻到图片的时候再加载那张图片,而不是以下将本页面的所有图片都加载完。

配置

配置过程也很简单,就是一个 npm 模块。 在你的 Hexo 目录下,执行以下命令:

1

npm install hexo-lazyload --save

然后在你的 Hexo 目录的配置文件 _config.yml 中添加配置:

lazyload:

enable: true

# className: #可选 e.g. .J-lazyload-img

# loadingImg: #可选 eg. ./images/loading.png

loadingImg - 图片未加载时的代替图

  • 默认路径: ‘/js/lazyload-plugin/loading.svg’
  • 如果需要自定义,添填入 loading 图片地址,如果是本地图片,不要忘记把图片添加到你的主题目录下。

className - 需要延迟加载的图片 class 选择器

  • 默认会延迟加载文章中的所有图片。
  • 如果不为空,请填入需要延迟加载的图片 class 选择器

效果展示

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Python 基础语法

    一份执着✘
  • LeetCode 993 Cousins in Binary Tree

    给予一颗二叉树,和两个节点的值,判断这两个节点是否是堂兄弟,即在同一层,但父节点不同。

    一份执着✘
  • LeetCode 1022 Sum of Root To Leaf Binary Numbers

    给予一颗二叉树,每个节点的值只有 0 和 1, 每个根到叶子节点的路径都是一个有效的二进制树, 如: 0 -> 1 -> 1 -> 0 -> 1, 那么用二进制...

    一份执着✘
  • Zookeeper Python调用

    安装:pip install kazoo 1、链接 from kazoo.client import KazooClient

    用户5760343
  • python PIL 打开\显示\保存图像

    使用python进行数字图片处理,还得安装Pillow包。虽然python里面自带一个PIL(python images library), 但这个库现在已经停...

    于小勇
  • Android 通过Intent调用系统拍照程序出现图片太小的问题解决办法

    按下拍照键后,会返回到你的activity,所以你的activity要在onActivityResult方法里加一个处理,

    砸漏
  • VB.NET Textbox内容写入listbox不按回车符分行时!

    Private Sub TextBox1_TextChanged(sender As Object, e As EventArgs) Handles TextB...

    巴西_prince
  • du熊学斐波那契I

    du熊学斐波那契I Time Limit : 2000/1000ms (C/Other)   Memory Limit : 65535/32768K (C/Ot...

    猿人谷
  • python中list的四种查找方法

    Python中是有查找功能的,四种方式:in、not in、count、index,前两种方法是保留字,后两种方式是列表的方法。

    py3study
  • 如何将后端BaaS化:业务逻辑的拆与合

    BaaS 化的核心其实就是把我们的后端应用封装成 RESTful API,然后对外提供服务,而为了后端应用更容易维护,我们需要将后端应用拆解成免运维的微服务

    码农架构

扫码关注云+社区

领取腾讯云代金券