⚡ Use lazy loading image function & add image viewer. Close #65

assets/css/_common/outline/sidebar/index.scss

@@ -27,6 +27,8 @@
 
   img {
     display: inline-block;
+    max-width: 120px;
+    max-height: 42px;
   }
 }
 

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 {

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
    /**

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');
     

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

layouts/_default/_markup/render-image.html

@@ -0,0 +1 @@
+<img src="/imgs/img-lazy-loading.gif" data-src="{{ .Destination | safeURL }}" alt="{{ .Text }}" {{ with .Title}} title="{{ . }}"{{ end }} />

layouts/partials/footer.html

@@ -45,7 +45,7 @@
   {{- range .list }}
     <a target="_blank" href="{{ .link }}" title="{{ .name }}">
       {{- if .image }}        
-        <img src="{{ .image.url }}" alt="{{ .name }}" />
+        <img src="/imgs/img-lazy-loading.gif" data-src="{{ .image.url }}" alt="{{ .name }}" />
       {{- else }}
         {{ .name }}
       {{- end }}

layouts/partials/post/footer_meta/reward.html

@@ -11,7 +11,7 @@
     {{- $pay := replace $name $fw ($fw | upper) 1 }}
     {{- $payName := T (printf "Reward%s" $pay) }}
     <div class="post-reward-item">
-      <img src="{{ $img }}" alt="{{ $.Site.Params.author }} - {{ $payName }}">
+      <img src="/imgs/img-lazy-loading.gif"  data-src="{{ $img }}" alt="{{ $.Site.Params.author }} - {{ $payName }}">
       <span>{{ $payName }}</span>
     </div>
     {{- end }}

layouts/partials/sidebar/overview.html

@@ -2,7 +2,7 @@
 <div class="site-author site-overview-item animated" itemprop="author" itemscope itemtype="http://schema.org/Person">
   {{- with .Site.Params.avatar.url }}
     <img class="site-author-image" itemprop="image" alt="{{ $author }}"
-      src="{{ . }}">
+    src="/imgs/img-lazy-loading.gif" data-src="{{ . }}">
   {{- end }}
   <p class="site-author-name" itemprop="name">{{ $author }}</p>
   <div class="site-description" itemprop="description">{{ .Site.Params.description }}</div>
@@ -64,7 +64,7 @@
 {{- if .sidebar }}
 <div class="cc-license animated" itemprop="license">
   <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.{{ substr $.Site.LanguageCode 0 2 }}" class="cc-opacity" rel="noopener" target="_blank" title="{{ T "CCLinkTitle" }}">
-    <img src="/imgs/cc/{{ .size }}/{{ replace .license "-" "_" }}.svg" alt="{{ T "CCLinkTitle" }}">
+    <img src="/imgs/img-lazy-loading.gif" data-src="/imgs/cc/{{ .size }}/{{ replace .license "-" "_" }}.svg" alt="{{ T "CCLinkTitle" }}">
   </a>
 </div>
 {{- end }}