自从基于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);