From 08156f22b870e288796ffe0852da4b3391ff8248 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=87=A1=E6=A2=A6=E6=98=9F=E5=B0=98?= Date: Sat, 29 Oct 2022 22:37:41 +0800 Subject: [PATCH] :zap: Use lazy loading image function & add image viewer. Close #65 --- assets/css/_common/outline/sidebar/index.scss | 2 ++ .../outline/sidebar/sidebar-author.scss | 3 +- assets/js/next-boot.js | 2 ++ assets/js/utils.js | 31 ++++++++++++++++++ data/resources.yaml | 6 ++++ layouts/_default/_markup/render-image.html | 1 + layouts/partials/footer.html | 2 +- layouts/partials/post/footer_meta/reward.html | 2 +- layouts/partials/sidebar/overview.html | 4 +-- static/imgs/img-lazy-loading.gif | Bin 0 -> 1019640 bytes 10 files changed, 48 insertions(+), 5 deletions(-) create mode 100644 layouts/_default/_markup/render-image.html create mode 100644 static/imgs/img-lazy-loading.gif diff --git a/assets/css/_common/outline/sidebar/index.scss b/assets/css/_common/outline/sidebar/index.scss index da01454..dd214ac 100644 --- a/assets/css/_common/outline/sidebar/index.scss +++ b/assets/css/_common/outline/sidebar/index.scss @@ -27,6 +27,8 @@ img { display: inline-block; + max-width: 120px; + max-height: 42px; } } diff --git a/assets/css/_common/outline/sidebar/sidebar-author.scss b/assets/css/_common/outline/sidebar/sidebar-author.scss index b903716..f1f6e41 100644 --- a/assets/css/_common/outline/sidebar/sidebar-author.scss +++ b/assets/css/_common/outline/sidebar/sidebar-author.scss @@ -1,6 +1,7 @@ .site-author-image { border: $site-author-image-border-width solid $site-author-image-border-color; - max-width: $site-author-image-width; + width: $site-author-image-width; + height: $site-author-image-width; padding: 2px; @if $avatar_rounded { diff --git a/assets/js/next-boot.js b/assets/js/next-boot.js index e34da36..8b55d29 100644 --- a/assets/js/next-boot.js +++ b/assets/js/next-boot.js @@ -17,6 +17,7 @@ NexT.boot.registerEvents = function() { + NexT.utils.registerImageLoadEvent(); NexT.utils.registerScrollPercent(); // NexT.utils.registerCanIUseTag(); NexT.utils.registerToolButtons(); @@ -63,6 +64,7 @@ NexT.boot.refresh = function() { } else { NexT.utils.hideCommontes(); } + NexT.utils.registerImageViewer(); //TODO /** diff --git a/assets/js/utils.js b/assets/js/utils.js index 9d5ab07..fec3f32 100644 --- a/assets/js/utils.js +++ b/assets/js/utils.js @@ -7,6 +7,37 @@ HTMLElement.prototype.wrap = function (wrapper) { }; NexT.utils = { + registerImageLoadEvent: function() { + var images = document.querySelectorAll('.sidebar img, .post-block img, .vendors-list img'); + + var callback = (entries) => { + entries.forEach(item => { + if (item.intersectionRatio > 0) { + var ele = item.target; + var imgSrc = ele.getAttribute('data-src'); + if (imgSrc) { + var img = new Image(); + img.addEventListener('load', function() { + ele.src = imgSrc; + }, false); + ele.src = imgSrc; + // Prevent load image again + ele.removeAttribute('data-src'); + } + } + }) + }; + + var observer = new IntersectionObserver(callback); + images.forEach(img => { + observer.observe(img); + }); + }, + + registerImageViewer: function() { + new Viewer(document.querySelector('.post-body'),{ navbar:2, toolbar:2 }); + }, + registerToolButtons: function () { const buttons = document.querySelector('.tool-buttons'); diff --git a/data/resources.yaml b/data/resources.yaml index 1325f46..6e6db4c 100644 --- a/data/resources.yaml +++ b/data/resources.yaml @@ -10,6 +10,9 @@ js: - name: animejs version: 3.2.1 file: lib/anime.min.js + - name: viewerjs + version: 1.11.0 + file: dist/viewer.min.js # CSS 资源 # CSS Resources @@ -21,6 +24,9 @@ css: - name: animate.css version: 3.1.1 file: animate.min.css + - name: viewerjs + version: 1.11.0 + file: dist/viewer.min.css # 第三方服务组件资源 # 3rd servcies Resource diff --git a/layouts/_default/_markup/render-image.html b/layouts/_default/_markup/render-image.html new file mode 100644 index 0000000..d187cc9 --- /dev/null +++ b/layouts/_default/_markup/render-image.html @@ -0,0 +1 @@ +{{ .Text }} \ No newline at end of file diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index d955eeb..dd4ec0c 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -45,7 +45,7 @@ {{- range .list }} {{- if .image }} - {{ .name }} + {{ .name }} {{- else }} {{ .name }} {{- end }} diff --git a/layouts/partials/post/footer_meta/reward.html b/layouts/partials/post/footer_meta/reward.html index 0b34727..f9eba82 100644 --- a/layouts/partials/post/footer_meta/reward.html +++ b/layouts/partials/post/footer_meta/reward.html @@ -11,7 +11,7 @@ {{- $pay := replace $name $fw ($fw | upper) 1 }} {{- $payName := T (printf "Reward%s" $pay) }}
- {{ $.Site.Params.author }} - {{ $payName }} + {{ $.Site.Params.author }} - {{ $payName }} {{ $payName }}
{{- end }} diff --git a/layouts/partials/sidebar/overview.html b/layouts/partials/sidebar/overview.html index 7ff0a29..4a7b280 100644 --- a/layouts/partials/sidebar/overview.html +++ b/layouts/partials/sidebar/overview.html @@ -2,7 +2,7 @@