From c4606930ffb5cc76356aed3de3dea78838edd761 Mon Sep 17 00:00:00 2001 From: Cell <1024@lruihao.cn> Date: Wed, 1 Nov 2023 17:16:04 +0800 Subject: [PATCH] :bug: Fix: anchor jump exception caused by lazy loading of responsive images (#348) --- assets/css/_page/_single.scss | 26 +++++---- docs | 2 +- layouts/partials/plugin/image.html | 93 ++++++++++++++++++------------ 3 files changed, 72 insertions(+), 49 deletions(-) diff --git a/assets/css/_page/_single.scss b/assets/css/_page/_single.scss index b2cb8eb6..6166537b 100644 --- a/assets/css/_page/_single.scss +++ b/assets/css/_page/_single.scss @@ -290,18 +290,24 @@ height: auto; } - &:is([loading='lazy']):not(.suffix-invalid):not([data-lazyloaded]) { - @media (min-resolution: 1dppx) { - width: var(--img-w); - height: var(--img-h); + &:is([loading='lazy']):not([data-lazyloaded]) { + &:not(.suffix-invalid__small) { + width: var(--width-small, var(--width)); + aspect-ratio: var(--aspect-ratio-small, var(--aspect-ratio)); } - @media (min-resolution: 1.5dppx) { - width: calc(var(--img-w) / 1.5); - height: calc(var(--img-h) / 1.5); + + &:not(.suffix-invalid) { + @media (min-resolution: 1.01dppx) and (max-resolution: 1.5dppx) { + width: calc(var(--width) / 1.5); + aspect-ratio: var(--aspect-ratio); + } } - @media (min-resolution: 2dppx) { - width: calc(var(--img-w) / 2); - height: calc(var(--img-h) / 2); + + &:not(.suffix-invalid__large) { + @media (min-resolution: 1.51dppx) { + width: calc(var(--width-large, var(--width)) / 2); + aspect-ratio: var(--aspect-ratio-large, var(--aspect-ratio)); + } } } diff --git a/docs b/docs index 406d35f8..e91c033c 160000 --- a/docs +++ b/docs @@ -1 +1 @@ -Subproject commit 406d35f8c389f5273d4abf5ad4e6b1074dc03a9a +Subproject commit e91c033ccd1268c952aa35818d8f4d7d4e51edda diff --git a/layouts/partials/plugin/image.html b/layouts/partials/plugin/image.html index 3589d699..725eeb94 100644 --- a/layouts/partials/plugin/image.html +++ b/layouts/partials/plugin/image.html @@ -1,48 +1,64 @@ -{{- /* lightgallery */ -}} +{{- /* this method is only available for image resources that are raster images */ -}} {{- $src := .Src -}} -{{- $width := .Width -}} -{{- $height := .Height -}} {{- $class := .Class | default "" -}} {{- $style := "" -}} -{{- $cacheRemoteImages := (.Params.cacheRemoteImages | default dict) | merge site.Params.cacheRemoteImages -}} -{{- $suffixList := slice ".jpeg" ".jpg" ".png" ".gif" ".bmp" ".tif" ".tiff" ".webp" -}} -{{- $suffixValid := dict "Path" $src "Suffixes" $suffixList | partial "function/suffix-validation.html" -}} - -{{- if not $suffixValid -}} - {{- $class = printf "%v suffix-invalid" $class -}} -{{- end -}} - -{{- with dict "Path" .Src "Resources" .Resources "CacheRemoteImages" $cacheRemoteImages.enable | partial "function/resource.html" -}} - {{- $url := urls.Parse $.Src -}} - {{- if not $url.Host | or $cacheRemoteImages.replace -}} - {{- $src = .RelPermalink -}} - {{- end -}} - {{- /* this method is only available for image resources that are raster images */ -}} - {{- if (not $.Width) | and (not $.Height) | and (eq .ResourceType "image") | and $suffixValid -}} - {{- $width = .Width -}} - {{- $height = .Height -}} - {{- $style = printf "--img-w: %vpx;--img-h: %vpx;" .Width .Height | safeHTMLAttr -}} - {{- end -}} -{{- end -}} - -{{- $small := .SrcSmall | default $src -}} -{{- with dict "Path" .SrcSmall "Resources" .Resources "CacheRemoteImages" $cacheRemoteImages.enable | partial "function/resource.html" -}} - {{- $small = .RelPermalink -}} -{{- end -}} - -{{- $large := .SrcLarge | default $src -}} -{{- with dict "Path" .SrcLarge "Resources" .Resources "CacheRemoteImages" $cacheRemoteImages.enable | partial "function/resource.html" -}} - {{- $large = .RelPermalink -}} -{{- end -}} - -{{- $alt := .Alt | default $src -}} -{{- $caption := .Caption | default $alt -}} {{- $loading := .Loading | default "lazy" -}} {{- $onload := "" -}} {{- $onerror := "" -}} +{{- $cacheRemoteImages := (.Params.cacheRemoteImages | default dict) | merge site.Params.cacheRemoteImages -}} +{{- $suffixList := slice ".jpeg" ".jpg" ".png" ".gif" ".bmp" ".tif" ".tiff" ".webp" -}} +{{- /* handle for default size image */ -}} +{{- with dict "Path" $src "Resources" .Resources "CacheRemoteImages" $cacheRemoteImages.enable | partial "function/resource.html" -}} + {{- $url := urls.Parse $src -}} + {{- $suffixValid := dict "Path" $src "Suffixes" $suffixList | partial "function/suffix-validation.html" -}} + {{- if not $url.Host | or $cacheRemoteImages.replace -}} + {{- $src = .RelPermalink -}} + {{- end -}} + {{- if not $suffixValid -}} + {{- $class = printf "%v suffix-invalid" $class -}} + {{- else if eq .ResourceType "image" -}} + {{- $style = printf "--width: %vpx;--aspect-ratio: %v / %v;" .Width .Width .Height | safeHTMLAttr -}} + {{- end -}} +{{- end -}} + +{{- /* handle for small size image */ -}} +{{- $small := .SrcSmall | default $src -}} +{{- with dict "Path" .SrcSmall "Resources" .Resources "CacheRemoteImages" $cacheRemoteImages.enable | partial "function/resource.html" -}} + {{- $url := urls.Parse $.SrcSmall -}} + {{- $suffixValid := dict "Path" $.SrcSmall "Suffixes" $suffixList | partial "function/suffix-validation.html" -}} + {{- if not $url.Host | or $cacheRemoteImages.replace -}} + {{- $small = .RelPermalink -}} + {{- end -}} + {{- if not $suffixValid -}} + {{- $class = printf "%v suffix-invalid__small" $class -}} + {{- else if eq .ResourceType "image" -}} + {{- $style = printf "%v--width-small: %vpx;--aspect-ratio-small: %v / %v;" $style .Width .Width .Height | safeHTMLAttr -}} + {{- end -}} +{{- end -}} + +{{- /* handle for large size image */ -}} +{{- $large := .SrcLarge | default $src -}} +{{- with dict "Path" .SrcLarge "Resources" .Resources "CacheRemoteImages" $cacheRemoteImages.enable | partial "function/resource.html" -}} + {{- $url := urls.Parse $.SrcLarge -}} + {{- $suffixValid := dict "Path" $.SrcLarge "Suffixes" $suffixList | partial "function/suffix-validation.html" -}} + {{- if not $url.Host | or $cacheRemoteImages.replace -}} + {{- $large = .RelPermalink -}} + {{- end -}} + {{- if not $suffixValid -}} + {{- $class = printf "%v suffix-invalid__large" $class -}} + {{- else if eq .ResourceType "image" -}} + {{- $style = printf "%v--width-large: %vpx;--aspect-ratio-large: %v / %v;" $style .Width .Width .Height | safeHTMLAttr -}} + {{- end -}} +{{- end -}} + +{{- /* set image alt and caption */ -}} +{{- $alt := .Alt | default $src -}} +{{- $caption := .Caption | default $alt -}} + +{{- /* set image lazy loading */ -}} +{{- /* for details, see https://lruihao.cn/posts/native-img-loading-lazy/ */ -}} {{- if eq $loading "lazy" -}} - {{- /* for details, see https://lruihao.cn/posts/native-img-loading-lazy/ */ -}} {{- /* TODO move to theme.js */ -}} {{- $commonScript := "this.title=this.dataset.title;this.alt=this.dataset.alt;for(const i of ['style', 'data-title','data-alt','onerror','onload']){this.removeAttribute(i);}" -}} {{- $onload = printf " onload=\"%vthis.dataset.lazyloaded='';\"" $commonScript | safeHTMLAttr -}} @@ -50,10 +66,11 @@ {{- $style = printf " style=\"%vbackground: url(%v) no-repeat center;\"" $style (resources.Get "svg/loading.svg" | minify).RelPermalink | safeHTMLAttr -}} {{- end -}} +{{- /* structure of lightgallery or img */ -}} {{- if .Linked -}} {{- end -}} -