lozad.js学习使用

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是怎么工作的》，可惜没有讲到对应的源代码，不过受他启发，去找对应的源代码。一开始觉得大概率是在生成的时候解析的，于是在这几个generator的文件夹中找？怎么找，sublime中右键[图片上传失败…(image-67a3c5-1510805619540)]选择Find in Folder就行，我选择查找的关键字是<img src=,可惜没有找到对应的源码。
接着在渲染的这几个renderer文件夹中找,其实看文件夹名就能看出端倪，hexo-renderer-ejs对应ejs,hexo-renderer-stylus对应syl,hexo-renderer-marked对应markdown咯。
打开对应的README.md就看见你这么一句