给hexo博客添加lozad.js,实现图片惰性加载

给hexo博客添加lozad.js,实现图片惰性加载_第1张图片
image

github地址 lozad.js
前几天在公众号上看到github上一些受欢迎的项目,其中就有lozad.js,据说碾压jquery.lazyload.js。而自己也一直想给自己博客添加惰性加载以提高页面打开速度(没办法,git略卡,aplayer音乐播放器和cnzz统计都被舍弃了)

介绍

使用请参照github上的README.md中的Usage,英文实在看不懂可以参照sf的这篇文章《lozad.js:懒加载神器》,以及阮老师的文章

实战-给主题添加

首先给列表页面(category-items.ejs)加上了对应的class和data-src,然后在layout.ejs里面加上了

$(function () {
    const observer = lozad();
    observer.observe();
});

测试通过。

实战-修改代码使hexo生成的img加上class和data-src

列表页是在模板(themes)来编写的,自然能找到对应的img元素代码,给其加上class和data-src并不是难事。接下来遇到了个问题,要给文章中的图片也加上对应的class和data-src就不容易了。
因为文章的内容是在hexo的变量中,

全局变量

变量 描述
site 网站变量
page 针对该页面的内容以及 front-matter 所设定的变量。
config 网站配置
theme 主题配置。继承自网站配置。
_ (单下划线) Lodash 函数库
path 当前页面的路径(不含根路径)
url 当前页面的完整网址
env 环境变量

页面变量

变量 描述
page.title 页面标题
page.date 页面建立日期(Moment.js 对象)
page.updated 页面更新日期(Moment.js 对象)
page.comments 留言是否开启
page.layout 布局名称
page.content 页面的完整内容
page.excerpt 页面摘要
page.more 除了页面摘要的其余内容
page.source 页面原始路径
page.full_source 页面的完整原始路径
page.path 页面网址(不含根路径)。我们通常在主题中使用 url_for(page.path)。
page.permalink 页面的完整网址
page.prev 上一个页面。如果此为第一个页面则为 null。
page.next 下一个页面。如果此为最后一个页面则为 null。
page.raw 文章的原始内容
page.photos 文章的照片(用于相簿)
page.link 文章的外部链接(用于链接文章)

其中page.content就是文章的内容了,接下来就是找到hexo是在哪里把markdown解释成html了。推荐一篇《hexo是怎么工作的》,可惜没有讲到对应的源代码,不过受他启发,去找对应的源代码。一开始觉得大概率是在生成的时候解析的,于是在

给hexo博客添加lozad.js,实现图片惰性加载_第2张图片
image
这几个generator的文件夹中找?怎么找,sublime中右键[图片上传失败...(image-67a3c5-1510805619540)]选择Find in Folder就行,我选择查找的关键字是 ,可惜没有找到对应的源码。
接着在渲染的
image
这几个renderer文件夹中找,其实看文件夹名就能看出端倪,hexo-renderer-ejs对应ejs,hexo-renderer-stylus对应syl,hexo-renderer-marked对应markdown咯。
打开对应的README.md就看见你这么一句

Add support for [Markdown]. This plugin uses [marked] as render engine.

看来是找到了。查找发现真正的位置在

image
这里, \node_modules\[email protected]@marked\lib\marked.js在这个js中解析的markdown,接下来就好办了,把对应解析图片那段代码添加class和data-src即可。修改好记得

hexo clean
hexo g

清空重新生成一下。
ok,文章图片也实现了惰性加载

新建了个程序员交流群194472590,欢迎加入交流!

你可能感兴趣的:(给hexo博客添加lozad.js,实现图片惰性加载)