Lazy Load實現進一步加快網速以及貪酒關

2018-11-27 约 1650 字 预计阅读 4 分钟

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

Lazy load images

<img src="/placeholder.svg" data-src="placeholder.svg" data-src="/placeholder.svg" data-src="realbig.jpg">

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

此名詞不好翻譯就保持如此了。看了看需要不少的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功能修改,代碼如下:

Hugo Themes

{{ $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.Before lazy load 使用lazy load後文件大小為524kb,加載時間就隻有2.8s After lazy load


通關文之貪酒關

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

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

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


Tags: hugo 通關文

author

Jesse Lau

網名遁去的一,簡稱遁一。2012年定居新西蘭至今,自由職業者。手搓的GPTs
本文采用知識共享署名 4.0 國際許可協議進行許可。簡而言之,可隨意轉發轉載,轉載請注明出處。


留点评论吧: