原文轉(zhuǎn)自: https://troyyang.com/2017/08/06/hexo-lazyload-image/
動(dòng)機(jī)
最近在看Google Chrome新出的一個(gè)API是無(wú)意間想到了對(duì)圖片的懶加載忽媒，后來(lái)想想自己的網(wǎng)站還不支持呢，索性花了些時(shí)間讓網(wǎng)站給支持上了汤纸，并發(fā)現(xiàn)Hexo上還沒(méi)有一個(gè)支持懶加載的插件，又倒騰著寫(xiě)了個(gè)hexo的插件，并發(fā)布到NPM上供大家使用，名字就叫hexo-lazyload-image，從這幾天下載數(shù)來(lái)看看來(lái)大家還是很有這個(gè)需求 :)渤愁。
圖片懶加載
圖片懶加載是提升網(wǎng)站性能和用戶(hù)體驗(yàn)的一個(gè)非常很好方式，并且?guī)缀跛械拇笮途W(wǎng)站都使用到了深夯，比如微博抖格，僅把用戶(hù)可見(jiàn)的部分顯示圖片，其余的都暫時(shí)不加載塌西，做法就是：讓所有圖片元素src指向一個(gè)小的站位圖片比如loading他挎，并新增一個(gè)屬性(如data-original)存放真實(shí)圖片地址。每當(dāng)頁(yè)面加載（或者滾動(dòng)條滾動(dòng)）捡需，使用JS腳本將可視區(qū)域內(nèi)的圖片src替換回真實(shí)地址，并做請(qǐng)求重新加載筹淫。
Hexo-lazy-image 實(shí)現(xiàn)原理
因?yàn)槲恼露际鞘褂胢arkdown來(lái)編寫(xiě)的站辉，所以不可能要求我們?cè)趍arkdown里將所有圖片路徑都指向站位圖片，并附加另一個(gè)屬性损姜，所以饰剥，這個(gè)工作必須留給hexo的generate部分來(lái)做。
最終可分為兩步：
- 在hexo after_post_render事件或者after_render:html事件里將生產(chǎn)出來(lái)的文章html代碼中所有img元素都加上 data-original 屬性摧阅，并把src值付給他汰蓉， 然后在將src值致為loading圖片
- 注入simple-lazyload腳本在每個(gè)頁(yè)面最后面，當(dāng)頁(yè)面加載過(guò)后負(fù)責(zé)判定當(dāng)前需要重新加載的圖片棒卷。
這里重點(diǎn)提提正則表達(dá)式顾孽，在對(duì)第一步替換的時(shí)候，只是使用了簡(jiǎn)單的正則表達(dá)式去匹配查找所有的img節(jié)點(diǎn)比规，后來(lái)發(fā)現(xiàn)不僅如此若厚，正則表達(dá)式結(jié)合string.replace更是如此強(qiáng)大，直接將我原來(lái)30行的代碼減為3行蜒什，從此熱愛(ài)上了正則表達(dá)式测秸。
return htmlContent.replace(/<img(\s*?)src="(.*?)"(.*?)>/gi, function (str, p1, p2) {
return str.replace(p2, loadingImage + '" data-original="' + p2);
});
關(guān)于simple-lazyload，這個(gè)是懶加載替換腳本的核心，原來(lái)使用jquery-lazyload插件霎冯，后來(lái)覺(jué)得沒(méi)必要铃拇，最終還是自己寫(xiě)了個(gè)簡(jiǎn)單版。
Hexo-lazy-image 使用
安裝步驟：
npm install hexo-lazyload-image --save
然后修改 _config.yml 文件
lazyload:
enable: true
onlypost: false
loadingImg: # eg. ./images/loading.png
既然要分享出來(lái)沈撞，那就得提供更多靈活的API來(lái)滿(mǎn)足不同的需求锚贱，所以又加上了以下功能:
- 自定義占位圖片。（不指定使用默認(rèn)值）
- 只針對(duì)文章內(nèi)容或者全網(wǎng)站圖片使用圖片懶加載
關(guān)于npm 發(fā)布包那點(diǎn)事
發(fā)布NPM包的時(shí)候有幾個(gè)注意事項(xiàng)关串，這里列一下
- 每次publish必須在readme中更新版本號(hào)(npm patch會(huì)自動(dòng)為你生成最新版本號(hào)方便你使用)
- 要更新npm中的readme頁(yè)面拧廊，需要再次調(diào)用npm patch命令，不然盡管你已經(jīng)更新了readme文件晋修，npm包頁(yè)面還是保持原來(lái)的頁(yè)面
- 在packages.json中最好把git地址加上吧碾，因?yàn)閚pm會(huì)自動(dòng)解析packages.json文件，會(huì)映射到包頁(yè)面相應(yīng)的位置
