自从基于hexo搭建了自己的博客，发现加载网页一直都很慢，其根本是因为图片过多，网页要等所有图片下载完毕才能完全渲染出来，如果可以先加载文字，图片能够延迟加载并且呈现loading中的效果就最好不过了，搜索了网上的资料，大多采用了网上使用范围较广的LazyLoad解决方案，但是很多都模糊不清，并没有指导别人很好解决问题。在自己的多次尝试后，发现以下的方法最有效。
思路
在hexo中编写博客，一般以markdown或html的img标签来添加图片 ，只要在渲染之前将所有img标签替换成适合LazyLoad的格式就可以了
第一步
在你使用的主题文件夹找到 layout > _partial > footer.ejs 文件（或者 head.ejs也可以），在后面加入以下代码
//引用了jquery百度的 cdn 源，也可替换其他的
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
//也可替换其他的lazyload源
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery-lazyload/1.9.5/jquery.lazyload.min.js"></script>
<script type="text/javascript">
$(function() {
//对所有 img 标签进行懒加载
$("img").lazyload({
//设置占位图，我这里选用了一个 loading 的加载动画
placeholder:"/img/loading.gif",
//加载效果
effect:"fadeIn"
});
});
</script>
第二步
在主题文件夹下的scripts文件夹里，增加一个 js 文件，命名随意，我这里命名 lazyload-core.js,里面内容如下
'use strict';
var cheerio = require('cheerio');
function lazyloadImg(source) {
var LZ= cheerio.load(source, {
decodeEntities: false
});
//遍历所有 img 标签，添加data-original属性
LZ('img').each(function(index, element) {
var oldsrc = LZ(element).attr('src');
if (oldsrc) {
LZ(element).removeAttr('src');
LZ(element).attr({
'data-original': oldsrc
});
}
});
return LZ.html();
}
//在渲染之前，更改 img 标签
hexo.extend.filter.register('after_render:html', lazyloadImg);
