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

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是怎么工作的》，可惜没有讲到对应的源代码，不过受他启发，去找对应的源代码。一开始觉得大概率是在生成的时候解析的，于是在

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，欢迎加入交流！