Lazy Load实现进一步加快网速以及贪酒关

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

几天前看到一个lazy load的概念,就是用一个小图先占住大图的位置,等用户刷屏浏览到图片位置时再用javascript显示大图。
HTML语言就类似下列

Lazy load images

<img 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年定居新西兰至今,自由职业者。
本文采用知识共享署名 4.0 国际许可协议进行许可。简而言之,可随意转发转载,转载请注明出处。


留点评论吧:

本网站使用cookie技术以提高用户体验度。 了解我们的隐私政策 我已了解