From 934c57cdff9cadbfa40466bfd9cd63c4dcf392a4 Mon Sep 17 00:00:00 2001 From: Cell <1024@lruihao.cn> Date: Fri, 10 Feb 2023 17:38:50 +0800 Subject: [PATCH] :recycle: Refactor: image lazy loading Fixes #283 --- CHANGELOG.md | 1 + README.md | 2 - README.zh-cn.md | 2 - assets/css/_page/_home.scss | 5 +-- assets/css/_page/_single.scss | 12 ++---- assets/css/_partials/_img.scss | 9 +---- assets/data/cdn/jsdelivr.yml | 2 - assets/data/cdn/unpkg.yml | 2 - assets/lib/VERSION | 1 - assets/lib/lazysizes/lazysizes.min.js | 3 -- docs | 2 +- layouts/friends/single.html | 4 +- layouts/partials/assets.html | 4 -- layouts/partials/plugin/image.html | 57 +++++++-------------------- layouts/shortcodes/image.html | 1 + 15 files changed, 25 insertions(+), 82 deletions(-) delete mode 100755 assets/lib/lazysizes/lazysizes.min.js diff --git a/CHANGELOG.md b/CHANGELOG.md index a4e22fa5..236332e4 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,6 +11,7 @@ All notable changes to this project will be documented in this file. - :sparkles: Feat: add `force` option value to `params.page.lightgallery` - :bug: Fix: donate images without lazy loading (@Mejituu [#279](https://github.com/hugo-fixit/FixIt/pull/279)) - :bug: Fix: discordinvite typo (@mathieu-gilloots [#282](https://github.com/hugo-fixit/FixIt/pull/282)) +- :recycle: Refactor: image lazy loading ([#283](https://github.com/hugo-fixit/FixIt/pull/283)) - :art: Style: fix `#comments` css style conflict ([#269](https://github.com/hugo-fixit/FixIt/issues/269)) - :wrench: Chore: change the theme minimum supported Hugo versions above **0.89.0** - :arrow_up: Chore(libs): diff --git a/README.md b/README.md index 245aca13..486bec28 100644 --- a/README.md +++ b/README.md @@ -82,7 +82,6 @@ To see this theme in action, here are some [live demo sites](https://fixit.lruih * **[Fathom Analytics](https://usefathom.com/)** supported * Search engine **verification** supported (Google, Bing, Yandex, Pinterest, Baidu, 360 and Sogou) * **CDN** for third-party libraries supported -* Automatically converted images with **Lazy Load** by [lazysizes](https://github.com/aFarkas/lazysizes) ### Appearance and Layout @@ -193,7 +192,6 @@ Make sure that you follow [CODE_OF_CONDUCT.md](CODE_OF_CONDUCT.md) while contrib * [Lunr.js](https://lunrjs.com/) * [algoliasearch](https://github.com/algolia/algoliasearch-client-javascript) * [Fuse.js](https://fusejs.io/) -* [lazysizes](https://github.com/aFarkas/lazysizes) * [object-fit-images](https://github.com/fregante/object-fit-images) * [Twemoji](https://github.com/twitter/twemoji) * [emoji-data](https://github.com/iamcal/emoji-data) diff --git a/README.zh-cn.md b/README.zh-cn.md index 7fa58cf3..b6af026e 100644 --- a/README.zh-cn.md +++ b/README.zh-cn.md @@ -82,7 +82,6 @@ FixIt 主题继承了 LoveIt 等主题的优秀功能，并在它们的基础上 * 支持 **[Fathom Analytics](https://usefathom.com/)** * 支持搜索引擎的**网站验证** (Google, Bing, Yandex, Pinterest, Baidu, 360 and Sogou) * 支持所有第三方库的 **CDN** -* 基于 [lazysizes](https://github.com/aFarkas/lazysizes) 自动转换图片为**懒加载** ### 外观和布局 @@ -197,7 +196,6 @@ FixIt 支持下列语言： * [Lunr.js](https://lunrjs.com/) * [algoliasearch](https://github.com/algolia/algoliasearch-client-javascript) * [Fuse.js](https://fusejs.io/) -* [lazysizes](https://github.com/aFarkas/lazysizes) * [object-fit-images](https://github.com/fregante/object-fit-images) * [Twemoji](https://github.com/twitter/twemoji) * [emoji-data](https://github.com/iamcal/emoji-data) diff --git a/assets/css/_page/_home.scss b/assets/css/_page/_home.scss index 67452f0e..43f3eea8 100644 --- a/assets/css/_page/_home.scss +++ b/assets/css/_page/_home.scss @@ -101,10 +101,7 @@ height: 100%; left: 0; top: 0; - - &.lazyloaded { - @include object-fit(cover); - } + @include object-fit(cover); } &:hover { diff --git a/assets/css/_page/_single.scss b/assets/css/_page/_single.scss index 7da8245e..3676cbd5 100644 --- a/assets/css/_page/_single.scss +++ b/assets/css/_page/_single.scss @@ -67,14 +67,11 @@ img { display: block; + width: 100%; max-width: 100%; height: auto; margin: 0 auto; overflow: hidden; - - &.lazyloaded { - width: 100%; - } } } @@ -274,10 +271,6 @@ img { max-width: 100%; min-height: 1em; - - &:not([data-h]) { - height: auto; - } } svg { max-width: 100%; @@ -299,10 +292,11 @@ img { display: block; + height: auto; margin: 0 auto; overflow: hidden; - &.lazyloaded:not([data-w]) { + &:not([width]) { width: 100%; } } diff --git a/assets/css/_partials/_img.scss b/assets/css/_partials/_img.scss index 267f204d..3b58a550 100644 --- a/assets/css/_partials/_img.scss +++ b/assets/css/_partials/_img.scss @@ -1,12 +1,7 @@ img { @include border-radius($global-border-radius/2); - &.lazyload, - &.lazyloading { - @include object-fit(scale-down); - } - - &.lazyloaded { - @include object-fit(contain); + &[loading='lazy']:not(.lazyloaded) { + background: url(/svg/loading.min.svg) no-repeat center; } } diff --git a/assets/data/cdn/jsdelivr.yml b/assets/data/cdn/jsdelivr.yml index 30000d8b..bb92350a 100644 --- a/assets/data/cdn/jsdelivr.yml +++ b/assets/data/cdn/jsdelivr.yml @@ -48,8 +48,6 @@ libFiles: katexCSS: katex@0.16.2/dist/katex.min.css katexJS: katex@0.16.2/dist/katex.min.js katexMhchemJS: katex@0.16.2/dist/contrib/mhchem.min.js - # lazysizes@5.3.2 https://github.com/aFarkas/lazysizes - lazysizesJS: lazysizes@5.3.2/lazysizes.min.js # lightgallery@2.6.1 https://github.com/sachinchoolur/lightgallery lightgalleryCSS: lightgallery@2.6.1/css/lightgallery-bundle.min.css lightgalleryJS: lightgallery@2.6.1/lightgallery.min.js diff --git a/assets/data/cdn/unpkg.yml b/assets/data/cdn/unpkg.yml index 2e7becf6..1aaff5c1 100644 --- a/assets/data/cdn/unpkg.yml +++ b/assets/data/cdn/unpkg.yml @@ -48,8 +48,6 @@ libFiles: katexCSS: katex@0.16.2/dist/katex.min.css katexJS: katex@0.16.2/dist/katex.min.js katexMhchemJS: katex@0.16.2/dist/contrib/mhchem.min.js - # lazysizes@5.3.2 https://github.com/aFarkas/lazysizes - lazysizesJS: lazysizes@5.3.2/lazysizes.min.js # lightgallery@2.6.1 https://github.com/sachinchoolur/lightgallery lightgalleryCSS: lightgallery@2.6.1/css/lightgallery-bundle.min.css lightgalleryJS: lightgallery@2.6.1/lightgallery.min.js diff --git a/assets/lib/VERSION b/assets/lib/VERSION index 92fbb0f7..79c45177 100644 --- a/assets/lib/VERSION +++ b/assets/lib/VERSION @@ -14,7 +14,6 @@ fusejs@6.6.2 https://github.com/krisk/fuse gitalk@1.7.2 https://github.com/gitalk/gitalk instant.page@5.1.1 https://github.com/instantpage/instant.page katex@0.16.2 https://github.com/KaTeX/KaTeX -lazysizes@5.3.2 https://github.com/aFarkas/lazysizes lightgallery@2.6.1 https://github.com/sachinchoolur/lightgallery lunr.js@2.3.9 https://github.com/olivernn/lunr.js mapbox-gl@2.10.0 https://github.com/mapbox/mapbox-gl-js diff --git a/assets/lib/lazysizes/lazysizes.min.js b/assets/lib/lazysizes/lazysizes.min.js deleted file mode 100755 index 35b726aa..00000000 --- a/assets/lib/lazysizes/lazysizes.min.js +++ /dev/null @@ -1,3 +0,0 @@ -/*! lazysizes - v5.3.2 */ - -!function(e){var t=function(u,D,f){"use strict";var k,H;if(function(){var e;var t={lazyClass:"lazyload",loadedClass:"lazyloaded",loadingClass:"lazyloading",preloadClass:"lazypreload",errorClass:"lazyerror",autosizesClass:"lazyautosizes",fastLoadedClass:"ls-is-cached",iframeLoadMode:0,srcAttr:"data-src",srcsetAttr:"data-srcset",sizesAttr:"data-sizes",minSize:40,customMedia:{},init:true,expFactor:1.5,hFac:.8,loadMode:2,loadHidden:true,ricTimeout:0,throttleDelay:125};H=u.lazySizesConfig||u.lazysizesConfig||{};for(e in t){if(!(e in H)){H[e]=t[e]}}}(),!D||!D.getElementsByClassName){return{init:function(){},cfg:H,noSupport:true}}var O=D.documentElement,i=u.HTMLPictureElement,P="addEventListener",$="getAttribute",q=u[P].bind(u),I=u.setTimeout,U=u.requestAnimationFrame||I,o=u.requestIdleCallback,j=/^picture$/i,r=["load","error","lazyincluded","_lazyloaded"],a={},G=Array.prototype.forEach,J=function(e,t){if(!a[t]){a[t]=new RegExp("(\\s|^)"+t+"(\\s|$)")}return a[t].test(e[$]("class")||"")&&a[t]},K=function(e,t){if(!J(e,t)){e.setAttribute("class",(e[$]("class")||"").trim()+" "+t)}},Q=function(e,t){var a;if(a=J(e,t)){e.setAttribute("class",(e[$]("class")||"").replace(a," "))}},V=function(t,a,e){var i=e?P:"removeEventListener";if(e){V(t,a)}r.forEach(function(e){t[i](e,a)})},X=function(e,t,a,i,r){var n=D.createEvent("Event");if(!a){a={}}a.instance=k;n.initEvent(t,!i,!r);n.detail=a;e.dispatchEvent(n);return n},Y=function(e,t){var a;if(!i&&(a=u.picturefill||H.pf)){if(t&&t.src&&!e[$]("srcset")){e.setAttribute("srcset",t.src)}a({reevaluate:true,elements:[e]})}else if(t&&t.src){e.src=t.src}},Z=function(e,t){return(getComputedStyle(e,null)||{})[t]},s=function(e,t,a){a=a||e.offsetWidth;while(a49?function(){o(t,{timeout:n});if(n!==H.ricTimeout){n=H.ricTimeout}}:te(function(){I(t)},true);return function(e){var t;if(e=e===true){n=33}if(a){return}a=true;t=r-(f.now()-i);if(t<0){t=0}if(e||t<9){s()}else{I(s,t)}}},ie=function(e){var t,a;var i=99;var r=function(){t=null;e()};var n=function(){var e=f.now()-a;if(e0;if(r&&Z(i,"overflow")!="visible"){a=i.getBoundingClientRect();r=C>a.left&&pa.top-1&&g500&&O.clientWidth>500?500:370:H.expand;k._defEx=u;f=u*H.expFactor;c=H.hFac;A=null;if(w2&&h>2&&!D.hidden){w=f;N=0}else if(h>1&&N>1&&M<6){w=u}else{w=_}}if(l!==n){y=innerWidth+n*c;z=innerHeight+n;s=n*-1;l=n}a=d[t].getBoundingClientRect();if((b=a.bottom)>=s&&(g=a.top)<=z&&(C=a.right)>=s*c&&(p=a.left)<=y&&(b||C||p||g)&&(H.loadHidden||x(d[t]))&&(m&&M<3&&!o&&(h<3||N<4)||W(d[t],n))){R(d[t]);r=true;if(M>9){break}}else if(!r&&m&&!i&&M<4&&N<4&&h>2&&(v[0]||H.preloadAfterLoad)&&(v[0]||!o&&(b||C||p||g||d[t][$](H.sizesAttr)!="auto"))){i=v[0]||d[t]}}if(i&&!r){R(i)}}};var a=ae(t);var S=function(e){var t=e.target;if(t._lazyCache){delete t._lazyCache;return}L(e);K(t,H.loadedClass);Q(t,H.loadingClass);V(t,B);X(t,"lazyloaded")};var i=te(S);var B=function(e){i({target:e.target})};var T=function(e,t){var a=e.getAttribute("data-load-mode")||H.iframeLoadMode;if(a==0){e.contentWindow.location.replace(t)}else if(a==1){e.src=t}};var F=function(e){var t;var a=e[$](H.srcsetAttr);if(t=H.customMedia[e[$]("data-media")||e[$]("media")]){e.setAttribute("media",t)}if(a){e.setAttribute("srcset",a)}};var s=te(function(t,e,a,i,r){var n,s,o,l,u,f;if(!(u=X(t,"lazybeforeunveil",e)).defaultPrevented){if(i){if(a){K(t,H.autosizesClass)}else{t.setAttribute("sizes",i)}}s=t[$](H.srcsetAttr);n=t[$](H.srcAttr);if(r){o=t.parentNode;l=o&&j.test(o.nodeName||"")}f=e.firesLoad||"src"in t&&(s||n||l);u={target:t};K(t,H.loadingClass);if(f){clearTimeout(c);c=I(L,2500);V(t,B,true)}if(l){G.call(o.getElementsByTagName("source"),F)}if(s){t.setAttribute("srcset",s)}else if(n&&!l){if(d.test(t.nodeName)){T(t,n)}else{t.src=n}}if(r&&(s||l)){Y(t,{src:n})}}if(t._lazyRace){delete t._lazyRace}Q(t,H.lazyClass);ee(function(){var e=t.complete&&t.naturalWidth>1;if(!f||e){if(e){K(t,H.fastLoadedClass)}S(u);t._lazyCache=true;I(function(){if("_lazyCache"in t){delete t._lazyCache}},9)}if(t.loading=="lazy"){M--}},true)});var R=function(e){if(e._lazyRace){return}var t;var a=n.test(e.nodeName);var i=a&&(e[$](H.sizesAttr)||e[$]("sizes"));var r=i=="auto";if((r||!m)&&a&&(e[$]("src")||e.srcset)&&!e.complete&&!J(e,H.errorClass)&&J(e,H.lazyClass)){return}t=X(e,"lazyunveilread").detail;if(r){re.updateElem(e,true,e.offsetWidth)}e._lazyRace=true;M++;s(e,t,r,i,a)};var r=ie(function(){H.loadMode=3;a()});var o=function(){if(H.loadMode==3){H.loadMode=2}r()};var l=function(){if(m){return}if(f.now()-e<999){I(l,999);return}m=true;H.loadMode=3;a();q("scroll",o,true)};return{_:function(){e=f.now();k.elements=D.getElementsByClassName(H.lazyClass);v=D.getElementsByClassName(H.lazyClass+" "+H.preloadClass);q("scroll",a,true);q("resize",a,true);q("pageshow",function(e){if(e.persisted){var t=D.querySelectorAll("."+H.loadingClass);if(t.length&&t.forEach){U(function(){t.forEach(function(e){if(e.complete){R(e)}})})}}});if(u.MutationObserver){new MutationObserver(a).observe(O,{childList:true,subtree:true,attributes:true})}else{O[P]("DOMNodeInserted",a,true);O[P]("DOMAttrModified",a,true);setInterval(a,999)}q("hashchange",a,true);["focus","mouseover","click","load","transitionend","animationend"].forEach(function(e){D[P](e,a,true)});if(/d$|^c/.test(D.readyState)){l()}else{q("load",l);D[P]("DOMContentLoaded",a);I(l,2e4)}if(k.elements.length){t();ee._lsFlush()}else{a()}},checkElems:a,unveil:R,_aLSL:o}}(),re=function(){var a;var n=te(function(e,t,a,i){var r,n,s;e._lazysizesWidth=i;i+="px";e.setAttribute("sizes",i);if(j.test(t.nodeName||"")){r=t.getElementsByTagName("source");for(n=0,s=r.length;n {{- /* Title */ -}}

{{- .Title -}}

- {{- /* Subtitle */ -}} {{- with $params.subtitle -}}

{{ . }}

{{- end -}} {{- /* Friend links */ -}} - {{- $loading := resources.Get "svg/loading.svg" | minify -}}
{{ range $index, $friend := .Site.Data.friends }} {{ if $friend.avatar }} - {{ $friend.nickname }} + {{- dict "Src" $friend.avatar "Alt" $friend.nickname "Class" "friend-avatar" "Resources" $.Resources | partial "plugin/image.html" -}} {{ else }} {{ $alt }} - -{{- else -}} - {{ $alt }} +{{- end -}} +{{ $alt }} +{{- if .Linked -}} + {{- end -}} diff --git a/layouts/shortcodes/image.html b/layouts/shortcodes/image.html index c35d13b2..f8b8bf29 100644 --- a/layouts/shortcodes/image.html +++ b/layouts/shortcodes/image.html @@ -11,6 +11,7 @@ {{- $options = dict "Width" (.Get "width") | merge $options -}} {{- $options = .Get "linked" | ne false | dict "Linked" | merge $options -}} {{- $options = dict "Rel" (.Get "rel") | merge $options -}} + {{- $options = dict "Loading" (.Get "loading") | merge $options -}} {{- else -}} {{- $options = cond $caption true false | dict "Linked" | merge $options -}} {{- end -}}