blogs/FixIt
1
0
Fork 0
mirror of https://github.com/hugo-fixit/FixIt.git synced 2026-08-24 15:28:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

♻️ Refactor: image lazy loading

Browse Source 
Fixes #283
This commit is contained in:
Cell
2023-02-10 17:38:50 +08:00
parent 3195fc5d62
commit 934c57cdff
15 changed files with 25 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files
CHANGELOG.md
+1
View File
@@ -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):
README.md
-2
View File
@@ -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)
README.zh-cn.md
-2
View File
@@ -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)
assets/css/_page/_home.scss
+1 -4
View File
@@ -101,10 +101,7 @@
height: 100%;
left: 0;
top: 0;
&.lazyloaded {
@include object-fit(cover);
}
@include object-fit(cover);
}
&:hover {
assets/css/_page/_single.scss
+3 -9
View File
@@ -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%;
}
}
assets/css/_partials/_img.scss
+2 -7
View File
@@ -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;
}
}
assets/data/cdn/jsdelivr.yml
-2
View File
@@ -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
assets/data/cdn/unpkg.yml
-2
View File
@@ -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
assets/lib/VERSION
-1
View File
@@ -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
assets/lib/lazysizes/lazysizes.min.js
Vendored
-3
View File
File diff suppressed because one or more lines are too long
docs
+1 -1
Submodule docs updated: 17a8c05470...bb79f09d03
layouts/friends/single.html
+1 -3
View File
@@ -6,19 +6,17 @@
<div class="header">
{{- /* Title */ -}}
<h1 class="single-title animate__animated animate__pulse animate__faster">{{- .Title -}}</h1>
{{- /* Subtitle */ -}}
{{- with $params.subtitle -}}<p class="single-subtitle animate__animated animate__fadeIn">{{ . }}</p>{{- end -}}
</div>
{{- /* Friend links */ -}}
{{- $loading := resources.Get "svg/loading.svg" | minify -}}
<script src="//at.alicdn.com/t/font_578712_g26jo2kbzd5qm2t9.js" async defer></script>
<div class="friend-links">
{{ range $index, $friend := .Site.Data.friends }}
<a class="friend-link" title="{{ $friend.description }}" href="{{ $friend.url | safeURL }}" rel="external noopener noreferrer" target="_blank">
{{ if $friend.avatar }}
<img class="friend-avatar lazyload" src="{{ $loading.RelPermalink }}" data-src="{{ $friend.avatar }}" alt="{{ $friend.nickname }}" />
{{- dict "Src" $friend.avatar "Alt" $friend.nickname "Class" "friend-avatar" "Resources" $.Resources | partial "plugin/image.html" -}}
{{ else }}
<svg class="friend-avatar" aria-hidden="true">
<use xlink:href="#icon-{{ add 1 $index }}"></use>
layouts/partials/assets.html
-4
View File
@@ -38,10 +38,6 @@
{{- end -}}
{{- end -}}
{{- /* lazysizes */ -}}
{{- $source := $cdn.lazysizesJS | default "lib/lazysizes/lazysizes.min.js" -}}
{{- dict "Source" $source "Fingerprint" $fingerprint "Async" true "Defer" true | dict "Scratch" .Scratch "Data" | partial "scratch/script.html" -}}
{{- /* instant.page */ -}}
{{- if $params.instantPage -}}
{{- $source := $cdn.instantPage | default "lib/instant-page/instantpage.min.js" -}}
layouts/partials/plugin/image.html
+15 -42
View File
@@ -1,25 +1,16 @@
{{- /* lazysizes and lightgallery */ -}}
{{- /* lightgallery */ -}}
{{- $src := .Src -}}
{{- $width := .Width -}}
{{- $height := .Height -}}
{{- with dict "Path" $src "Resources" .Resources | partial "function/resource.html" -}}
{{- $src = .RelPermalink -}}
{{- /* Resources can not get width and height of image for svg type */ -}}
{{- if ne .MediaType.SubType "svg" -}}
{{- $width = $width | default .Width -}}
{{- $height = $height | default .Height -}}
{{- if (not $width) | and (not $height) | and (ne .MediaType.SubType "svg") -}}
{{- $width = .Width -}}
{{- $height = .Height -}}
{{- end -}}
{{- end -}}
{{- $style := "" -}}
{{- with $width -}}
{{- $style = printf "width: %v;" . -}}
{{- end -}}
{{- with $height -}}
{{- $style = printf "%vheight: %v;" $style . -}}
{{- end -}}
{{- /* with $style }} {{ printf "style=\"%v\"" $style | safeHTMLAttr -}}{{- end */ -}}
{{- $small := .SrcSmall | default $src -}}
{{- with dict "Path" .SrcSmall "Resources" .Resources | partial "function/resource.html" -}}
{{- $small = .RelPermalink -}}
@@ -32,35 +23,17 @@
{{- $alt := .Alt | default $src -}}
{{- $caption := .Caption | default $alt -}}
{{- $loading := resources.Get "svg/loading.svg" | minify -}}
{{- $loading := .Loading | default "lazy" -}}
{{- if .Linked -}}
<a class="lightgallery" href="{{ $large | safeURL }}" data-thumbnail="{{ $small | safeURL }}"{{ with $caption }} data-sub-html="<h2>{{ . }}</h2>{{ with $.Title }}<p>{{ . }}</p>{{ end }}"{{ end }}{{ with .Rel }} rel="{{ . }}"{{ end }}>
<img
class="lazyload{{ with .Class }} {{ . }}{{ end }}"
src="{{ $loading.RelPermalink }}"
data-src="{{ $src | safeURL }}"
data-srcset="{{ $small | safeURL }}, {{ $src | safeURL }} 1.5x, {{ $large | safeURL }} 2x"
data-sizes="auto"
alt="{{ $alt }}"
title="{{ .Title | default $alt }}"
{{- with $width }} width="{{ . }}"{{- end -}}
{{- with $height }} height="{{ . }}"{{- end -}}
{{- with .Width }} data-w{{- end -}}
{{- with .Height }} data-h{{- end -}}
/>
</a>
{{- else -}}
<img
class="lazyload{{ with .Class }} {{ . }}{{ end }}"
src="{{ $loading.RelPermalink }}"
data-src="{{ $src | safeURL }}"
data-srcset="{{ $small | safeURL }}, {{ $src | safeURL }} 1.5x, {{ $large | safeURL }} 2x"
data-sizes="auto"
alt="{{ $alt }}"
title="{{ .Title | default $alt }}"
{{- with $width }} width="{{ . }}"{{- end -}}
{{- with $height }} height="{{ . }}"{{- end -}}
{{- with .Width }} data-w{{- end -}}
{{- with .Height }} data-h{{- end -}}
/>
{{- end -}}
<img loading="{{ $loading }}" src="{{ .Src | safeURL }}" srcset="{{ $small | safeURL }}, {{ .Src | safeURL }} 1.5x, {{ $large | safeURL }} 2x" sizes="auto" alt="{{ $alt }}" title="{{ .Title | default $alt }}"
{{- with $width }} width="{{ . }}"{{- end -}}
{{- with $height }} height="{{ . }}"{{- end -}}
{{- with .Class -}}class="{{ . }}"{{- end -}}
{{- if eq $loading "lazy" -}} onload="this.classList.add('lazyloaded')"{{- end -}}
/>
{{- if .Linked -}}
</a>
{{- end -}}
layouts/shortcodes/image.html
+1
View File
@@ -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 -}}