Hexo-lazyload-image图片懒加载

动机

最近在看Google Chrome新出的一个API是无意间想到了对图片的懒加载，后来想想自己的网站还不支持呢，索性花了些时间让网站给支持上了，并发现Hexo上还没有一个懒加载的插件，又倒腾着写了个hexo的插件hexo-lazyload-image，并发布到NPM上供大家使用，从这几天下载数来看看来大家还是很有这个需求 :)。

图片懒加载

图片懒加载是提升网站性能和用户体验的一个非常很好方式，并且几乎所有的大型网站都使用到了，比如微博，仅把用户可见的部分显示图片，其余的都暂时不加载，做法就是：让所有图片元素src指向一个小的站位图片比如loading，并新增一个属性(如data-original)存放真实图片地址。每当页面加载（或者滚动条滚动），使用JS脚本将可视区域内的图片src替换回真实地址，并做请求重新加载。

Hexo-lazy-image 实现原理

因为文章都是使用markdown来编写的，所以不可能要求我们在markdown里将所有图片路径都指向站位图片，并附加另一个属性，所以，这个工作必须留给hexo的generate部分来做。

最终可分为两步：

  1. 在hexo after_post_render事件或者after_render:html事件里将生产出来的文章html代码中所有img元素都加上 data-original 属性，并把src值付给他， 然后在将src值致为loading图片
  2. 注入simple-lazyload脚本在每个页面最后面，当页面加载过后负责判定当前需要重新加载的图片。

这里重点提提正则表达式，在对第一步替换的时候，只是使用了简单的正则表达式去匹配查找所有的img节点，后来发现不仅如此，正则表达式结合string.replace更是如此强大，直接将我原来30行的代码减为3行，从此热爱上了正则表达式。

1
2
3
return htmlContent.replace(/<img(\s*?)src="(.*?)"(.*?)>/gi, function (str, p1, p2) {
        return str.replace(p2, loadingImage + '" data-original="' + p2);
    });

关于simple-lazyload，这个是懒加载替换脚本的核心，原来使用jquery-lazyload插件，后来觉得没必要，最终还是自己写了个简单版。

Hexo-lazy-image 使用

安装步骤：

1
npm install hexo-lazyload-image --save

然后修改 _config.yml 文件

1
2
3
4
lazyload:
  enable: true 
  onlypost: false
  loadingImg: # eg. ./images/loading.png

既然要分享出来，那就得提供更多灵活的API来满足不同的需求，所以又加上了以下功能:

  1. 自定义占位图片。（不指定使用默认值）
  2. 只针对文章内容或者全网站图片使用图片懒加载

关于npm 发布包那点事

发布NPM包的时候有几个注意事项，这里列一下

  • 每次publish必须在readme中更新版本号(npm patch会自动为你生成最新版本号方便你使用)
  • 要更新npm中的readme页面，需要再次调用npm patch命令，不然尽管你已经更新了readme文件，npm包页面还是保持原来的页面
  • 在packages.json中最好把git地址加上，因为npm会自动解析packages.json文件，会映射到包页面相应的位置
本文由http://troyyang.com原创编写，转载请尽量保留版权网址，感谢您的理解与分享!
Top