hexo图片懒加载方案

自从基于hexo搭建了自己的博客，发现加载网页一直都很慢，其根本是因为图片过多，网页要等所有图片下载完毕才能完全渲染出来，如果可以先加载文字，图片能够延迟加载并且呈现loading中的效果就最好不过了，搜索了网上的资料，大多采用了网上使用范围较广的LazyLoad解决方案，但是很多都模糊不清，并没有指导别人很好解决问题。在自己的多次尝试后，发现以下的方法最有效。

思路

在hexo中编写博客，一般以markdown或html的img标签来添加图片 ，只要在渲染之前将所有img标签替换成适合LazyLoad的格式就可以了

第一步

在你使用的主题文件夹找到 layout > _partial > footer.ejs 文件（或者 head.ejs也可以），在后面加入以下代码

//引用了jquery百度的 cdn 源，也可替换其他的
 
 //也可替换其他的lazyload源

    

第二步

在主题文件夹下的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);