LiYanan2004

前言

此方法可以大幅提升 含有多图的网页的响应速度和延迟



需求来源

之前做了一期 如何在 material-x 上适配深色模式,看似比较成功。

⚠️但是,如果碰到有很多图片的网页,那么浏览器会耗费大量的时间去加载这些图片后再来执行 深色/浅色模式自动切换,导致自动切换延时非常高,所以来做一期教程:教大家 “如何在 Hexo 博客中使用 图片懒加载 技术来大幅降低含有多图的网页的响应速度和延迟”

最终效果



设置步骤

1、在 Hexo 目录下输入以下命令

1
$ npm install hexo-lazyload-image --save

命令行提示“+ hexo-lazyload-image” 时即表示成功!

2、在 “\hexo\config.yml” 里新增以下几行

loadingImg 后面的网址可以自由更换,作用是在图片未加载完成时显示的 loading 图片。

1
2
3
4
lazyload:
enable: true
onlypost: false
loadingImg: https://i.loli.net/2019/06/27/5d14a4e68f76d10696.gif

3、执行 “hexo clean && hexo g” 即可。

Enjoy it ~

 海报

 评论


字数统计:22.4k  |   正在计算...
总访问量为 次 。