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

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 }}