幾天前看到一個lazy load的概念，就是用一個小圖先占住大圖的位置，等用戶刷屏瀏覽到圖片位置時再用javascript顯示大圖。
HTML語言就類似下列

這個英文專用名詞不太好翻譯，隻記得少年時看過一本書叫《懶尋舊夢錄》，不過隻記得名字了，內容和作者都忘記了。

此名詞不好翻譯就保持如此了。看了看需要不少的javascript庫，而且很多實現是用jquery的。

不是說jquery不好，但感覺沒有必要加載這麼大的一個javascript庫，不就是onscroll的處理嗎，肯定有非常簡潔的代碼來實現之。

現代社會有了google，有了open source，有諸多大神無私奉獻，真的是很容易就找到了。

找到一個現成的代碼，也沒有幾行，非常簡潔地實現了這個功能。

代碼很好，我也無可修改，故此就不貼到我這個站了，可以直接去原網站觀看。

做好這個功能就需要將Hugo W3 Simple這個主題更改一下。

Lazy load在Hugo主題的實現

用hugo來實現這個功能，主要是需要把帖子內所有圖片，找到並替換成小圖。

Hugo支持正則表達式，找到圖片可以用這樣的表達式(?i)src\s*=\s*"([^"]*(png|jpg|jpeg|gif|bmp|svg))"

這是golang支持的正則表達式格式，前麵的(?i)表示不區分大小寫，就可以找到所有類似 src=“https://jesselau.com/wp-content/uploads/2018/09/uploadplugin.png或者SRC = “https://jesselau.com/wp-content/uploads/2018/09/uploadplugin.PnG" 這樣的格式。

基本上就是所有圖片了。然後在hugo主題裏用replaceRE功能修改，代碼如下：

{{ $regex := "(?i)src\\s*=\\s*\"([^\"]*(png|jpg|jpeg|gif|bmp|svg))\"" }}
 {{ $img := findRE $regex .Content }}

 {{ if gt (len $img) 0 }}
   {{ $placeholder := resources.Get "placeholder.svg" }}
   {{ $replacement := print "src=\"" $placeholder.RelPermalink "\" data-src=\"$1\"" }}
   {{ .Content | replaceRE $regex $replacement | safeHTML }}
 {{ else }}
   {{ .Content }}
 {{ end }} 

Lazy load的加速效果

如果頁麵有很多圖片，啟用lazy load功能可以使頁麵加載速度非常快。 實例演示.

這個網頁含有21個圖片。

不用lazy load前文件大小為854kb，加載時間3.5s. 使用lazy load後文件大小為524kb，加載時間就隻有2.8s

通關文之貪酒關

孟子曰：禹惡旨酒而好善言。
呂祖曰：酒色財氣四堵牆，人人俱在裏邊藏。有 人跳出牆兒外，便是長生不老方。
此皆教人不可貪酒而壞正事也。
蓋酒為四害之首，一貪於酒，酒醉性迷，色心於此而起，財念於此而生，氣性於此而發。
財色與氣，皆由酒起，喪德敗行，亦因於酒。
甚至任性亂行，蹈 於水火而不知，陷於刀兵而不曉。
古來多少聰明良才，英雄豪傑，往往皆遭此難，自喪性命。
亦有性格良善，自有把持，貪酒不至亂，色與財氣不能染者。
雖不亂不染，而神昏氣促，濕熱薰蒸，津液涸而氣血傷，無益有損。
故佛家以酒為首戒，蓋因為害最大也。
世間糊塗學人，借祖師酒肉穿腸道在心之語，不忌腥暈不斷酒之言，而便貪酒無厭，日在醉鄉，昏昏沉沉，顛顛倒倒，縱性而行。
或酒醉而失言傷人；或酒醉而記仇鬧事；或酒醉而拿刀弄棒；或酒醉而赤身露體，信口亂說；或酒醉而倒街臥巷，廉恥不顧；或酒醉而嘔吐傷氣，神魂不安。
甚至日久造作成病，飲食不入，至死不忌。
亦有專心慕道諸多偏病皆能去的，惟於此糟粕之味，卻不能戒。
噫！修真之士，務要拔去曆劫根塵，輪回種子，酒不過口頭滋味，外來之物，不是曆劫帶來之根，於此小病，終身且不能去的，如何能拔去曆劫輪回種子？
如此之輩，豈不是以小害大，自尋死路耶？
況此酒之一物，不比飲食湯水，飲食數日不進，即便餓壞，若酒終身不用，有何傷事？
如曰解渴，湯水甚便，何必用酒？
到底是貪酒之病深沉，不肯醫治耳。
吾勸真心學道者，速將貪酒關口打通，把好酒的一番意念，用在盡心窮理功夫上。
莫被曲魔攪撓。
雖酒為小節，能壞大事，狠力除去，其益甚多。
否則，貪酒無厭，醉生夢死，日在混沌之鄉，常居迷悶之網，妄想明道，難矣。

此關對本人並無難度。因少時好奇，5、6歲時偷抽家父一根煙，8、9歲時偷嚐家中一口瀘州老窖，都沒有什麼好印象，故此長大後煙酒不沾。

酒乃酒色財氣之首，道友們且需重視。

相关文章:

• 2018/11/24   Hugo W3 Simple主題快捷代碼演示以及因果關
• 2018/11/19   W3 CSS 實現固定瀏覽條以及怕苦關
• 2018/11/19   幸好這是夢以及陰惡關
• 2018/11/13   Pagination CSS設置自適應以及懦弱關
• 2018/11/11   設置Manticoresearch搞定Hugo站點的搜索引擎以及口舌關