原文轉自: https://troyyang.com/2017/08/06/hexo-lazyload-image/
動機
最近在看Google Chrome新出的一個API是無意間想到了對圖片的懶加載，后來想想自己的網站還不支持呢，索性花了些時間讓網站給支持上了，并發現Hexo上還沒有一個支持懶加載的插件，又倒騰著寫了個hexo的插件，并發布到NPM上供大家使用，名字就叫hexo-lazyload-image，從這幾天下載數來看看來大家還是很有這個需求 :)。
圖片懶加載
圖片懶加載是提升網站性能和用戶體驗的一個非常很好方式，并且幾乎所有的大型網站都使用到了，比如微博，僅把用戶可見的部分顯示圖片，其余的都暫時不加載，做法就是：讓所有圖片元素src指向一個小的站位圖片比如loading，并新增一個屬性(如data-original)存放真實圖片地址。每當頁面加載（或者滾動條滾動），使用JS腳本將可視區域內的圖片src替換回真實地址，并做請求重新加載。
Hexo-lazy-image 實現原理
因為文章都是使用markdown來編寫的，所以不可能要求我們在markdown里將所有圖片路徑都指向站位圖片，并附加另一個屬性，所以，這個工作必須留給hexo的generate部分來做。
最終可分為兩步：
- 在hexo after_post_render事件或者after_render:html事件里將生產出來的文章html代碼中所有img元素都加上 data-original 屬性，并把src值付給他， 然后在將src值致為loading圖片
- 注入simple-lazyload腳本在每個頁面最后面，當頁面加載過后負責判定當前需要重新加載的圖片。
這里重點提提正則表達式，在對第一步替換的時候，只是使用了簡單的正則表達式去匹配查找所有的img節點，后來發現不僅如此，正則表達式結合string.replace更是如此強大，直接將我原來30行的代碼減為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 使用
安裝步驟：
npm install hexo-lazyload-image --save
然后修改 _config.yml 文件
lazyload:
enable: true
onlypost: false
loadingImg: # eg. ./images/loading.png
既然要分享出來，那就得提供更多靈活的API來滿足不同的需求，所以又加上了以下功能:
- 自定義占位圖片。（不指定使用默認值）
- 只針對文章內容或者全網站圖片使用圖片懶加載
關于npm 發布包那點事
發布NPM包的時候有幾個注意事項，這里列一下
- 每次publish必須在readme中更新版本號(npm patch會自動為你生成最新版本號方便你使用)
- 要更新npm中的readme頁面，需要再次調用npm patch命令，不然盡管你已經更新了readme文件，npm包頁面還是保持原來的頁面
- 在packages.json中最好把git地址加上，因為npm會自動解析packages.json文件，會映射到包頁面相應的位置
