feat: Add lazyload of images

docs: Update

README.md

@@ -86,7 +86,7 @@ $ git pull
 
 | <img src="https://raw.githubusercontent.com/liuyib/picBed/master/collection/20190723235410.png" alt="IE" width="32px" height="32px" /></br> IE | <img src="https://cdnjs.cloudflare.com/ajax/libs/browser-logos/35.1.0/edge/edge_64x64.png" alt="Edge" width="32px" height="32px" /></br> Edge | <img src="https://raw.githubusercontent.com/liuyib/picBed/master/collection/20190723235406.png" alt="Firefox" width="32px" height="32px" /></br> Firefox | <img src="https://raw.githubusercontent.com/liuyib/picBed/master/collection/20190723235407.png" alt="Chrome" width="32px" height="32px" /></br> Chrome | <img src="https://raw.githubusercontent.com/liuyib/picBed/master/collection/20190723235409.png" alt="Safari" width="32px" height="32px" /></br> Safari | <img src="https://raw.githubusercontent.com/liuyib/picBed/master/collection/20190723235411.png" alt="Opera" width="32px" height="32px" /></br> Opera |
 | :---: | :---: | :---: |:---: | :---: | :---: |
-| Not Support | 12+ | 28+ | 21+ | 6.1+ | 12.1+ |
+| 9+ | 12+ | 41+ | 42+ | 10+ | 29+ |
 
 ## :handshake: 开源协议
 

README_en_US.md

@@ -84,7 +84,7 @@ If you have problems, please read [documentation](https://liuyib.github.io/hexo-
 
 | <img src="https://raw.githubusercontent.com/liuyib/picBed/master/collection/20190723235410.png" alt="IE" width="32px" height="32px" /></br> IE | <img src="https://cdnjs.cloudflare.com/ajax/libs/browser-logos/35.1.0/edge/edge_64x64.png" alt="Edge" width="32px" height="32px" /></br> Edge | <img src="https://raw.githubusercontent.com/liuyib/picBed/master/collection/20190723235406.png" alt="Firefox" width="32px" height="32px" /></br> Firefox | <img src="https://raw.githubusercontent.com/liuyib/picBed/master/collection/20190723235407.png" alt="Chrome" width="32px" height="32px" /></br> Chrome | <img src="https://raw.githubusercontent.com/liuyib/picBed/master/collection/20190723235409.png" alt="Safari" width="32px" height="32px" /></br> Safari | <img src="https://raw.githubusercontent.com/liuyib/picBed/master/collection/20190723235411.png" alt="Opera" width="32px" height="32px" /></br> Opera |
 | :---: | :---: | :---: |:---: | :---: | :---: |
-| Not Support | 12+ | 28+ | 21+ | 6.1+ | 12.1+ |
+| 9+ | 12+ | 41+ | 42+ | 10+ | 29+ |
 
 ## :handshake: License
 

_config.yml

@@ -538,6 +538,13 @@ gallery_waterfall:
   gap_x: 10px
   gap_y: 10px
 
+# Lazy load the images of post.
+# See: https://github.com/tuupola/lazyload
+lazyload:
+  enable: false
+  # Available values: gif | block
+  placeholder: gif
+
 # Google AdSense
 google_adsense:
   enable: false

docs/zh-CN/advanced/assist.md

 # 辅助功能
 
-## FancyBox <Badge text="stable"/> <Badge text="v1.1.4"/>
-
-如果想要使用 fancybox 功能，只需要修改主题配置文件即可：
-
-``` yaml
-fancybox: true
-```
-
-效果如下：
-
-![](https://raw.githubusercontent.com/liuyib/picBed/master/hexo-theme-stun/doc/20190724173526.png)
-
-你可以在这里在线体验效果：[https://liuyib.github.io/2019/05/15/hello-stun/index.html](https://liuyib.github.io/2019/05/15/hello-stun/index.html)
-
 ## 快捷键
 
 - 快速切换文章 <Badge text="beta" type="warn"/> <Badge text="v1.1.3"/>

layout/_common/config.pug

@@ -35,6 +35,11 @@
     gallery_waterfall = JSON.stringify(theme.gallery_waterfall);
   }
 
+  var lazyload = 'undefined';
+  if (theme.lazyload.enable) {
+    lazyload = JSON.stringify(theme.lazyload);
+  }
+
   var zoom_image = 'undefined';
   if (theme.zoom_image.enable) {
     zoom_image = JSON.stringify(theme.zoom_image);
@@ -70,6 +75,7 @@ script.
     fancybox: !{ theme.fancybox },
     zoom_image: !{ zoom_image },
     gallery_waterfall: !{ gallery_waterfall },
+    lazyload: !{ lazyload },
     external_link: !{ external_link },
     shortcuts: !{ shortcuts },
     notification: !{ notification }

layout/_scripts/cdn.pug

@@ -16,6 +16,9 @@ if theme.fancybox
 if theme.gallery_waterfall
   script(src="https://cdn.jsdelivr.net/npm/masonry-layout@4.2.2/dist/masonry.pkgd.min.js")
 
+if theme.lazyload
+  script(src="https://cdn.jsdelivr.net/npm/lazyload@2.0.0-rc.2/lazyload.min.js")
+
 if theme.canvas_ribbon && theme.canvas_ribbon.enable
   - var ribbon = theme.canvas_ribbon;
   script(src=theme.cdn.canvas_ribbon size=ribbon.size alpha=ribbon.alpha zIndex=ribbon.zIndex)

source/css/_components/index.styl

@@ -3,6 +3,7 @@
 @import './back2top.styl' if (hexo-config('back2top.enable'))
 @import './external-link.styl' if (hexo-config('external_link.icon.enable'))
 @import './fancybox.styl' if (hexo-config('fancybox'))
+@import './lazyload.styl' if (hexo-config('lazyload.enable'))
 @import './recent-posts.styl'
 @import './pagination.styl'
 @import './comments.styl'

source/css/_components/lazyload.styl

+.lazyload
+  &.block
+    box-sizing: content-box
+    min-width: 30px
+    min-height: 30px

source/images/loading.svg

+<svg class="lds-spinner" width="32px"  height="32px"  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" style="background: none;"><g transform="rotate(0 50 50)">
+  <rect x="46.5" y="9" rx="37.2" ry="7.2" width="7" height="16" fill="#888888">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.9230769230769231s" repeatCount="indefinite"></animate>
+  </rect>
+</g><g transform="rotate(27.692307692307693 50 50)">
+  <rect x="46.5" y="9" rx="37.2" ry="7.2" width="7" height="16" fill="#888888">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.8461538461538461s" repeatCount="indefinite"></animate>
+  </rect>
+</g><g transform="rotate(55.38461538461539 50 50)">
+  <rect x="46.5" y="9" rx="37.2" ry="7.2" width="7" height="16" fill="#888888">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.7692307692307693s" repeatCount="indefinite"></animate>
+  </rect>
+</g><g transform="rotate(83.07692307692308 50 50)">
+  <rect x="46.5" y="9" rx="37.2" ry="7.2" width="7" height="16" fill="#888888">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.6923076923076923s" repeatCount="indefinite"></animate>
+  </rect>
+</g><g transform="rotate(110.76923076923077 50 50)">
+  <rect x="46.5" y="9" rx="37.2" ry="7.2" width="7" height="16" fill="#888888">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.6153846153846154s" repeatCount="indefinite"></animate>
+  </rect>
+</g><g transform="rotate(138.46153846153845 50 50)">
+  <rect x="46.5" y="9" rx="37.2" ry="7.2" width="7" height="16" fill="#888888">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.5384615384615384s" repeatCount="indefinite"></animate>
+  </rect>
+</g><g transform="rotate(166.15384615384616 50 50)">
+  <rect x="46.5" y="9" rx="37.2" ry="7.2" width="7" height="16" fill="#888888">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.46153846153846156s" repeatCount="indefinite"></animate>
+  </rect>
+</g><g transform="rotate(193.84615384615384 50 50)">
+  <rect x="46.5" y="9" rx="37.2" ry="7.2" width="7" height="16" fill="#888888">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.38461538461538464s" repeatCount="indefinite"></animate>
+  </rect>
+</g><g transform="rotate(221.53846153846155 50 50)">
+  <rect x="46.5" y="9" rx="37.2" ry="7.2" width="7" height="16" fill="#888888">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.3076923076923077s" repeatCount="indefinite"></animate>
+  </rect>
+</g><g transform="rotate(249.23076923076923 50 50)">
+  <rect x="46.5" y="9" rx="37.2" ry="7.2" width="7" height="16" fill="#888888">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.23076923076923078s" repeatCount="indefinite"></animate>
+  </rect>
+</g><g transform="rotate(276.9230769230769 50 50)">
+  <rect x="46.5" y="9" rx="37.2" ry="7.2" width="7" height="16" fill="#888888">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.15384615384615385s" repeatCount="indefinite"></animate>
+  </rect>
+</g><g transform="rotate(304.61538461538464 50 50)">
+  <rect x="46.5" y="9" rx="37.2" ry="7.2" width="7" height="16" fill="#888888">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.07692307692307693s" repeatCount="indefinite"></animate>
+  </rect>
+</g><g transform="rotate(332.3076923076923 50 50)">
+  <rect x="46.5" y="9" rx="37.2" ry="7.2" width="7" height="16" fill="#888888">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="0s" repeatCount="indefinite"></animate>
+  </rect>
+</g></svg>
\ No newline at end of file

source/js/stun-boot.js

@@ -3,8 +3,7 @@ $(document).ready(function () {
   CONFIG.reward && Stun.utils.registerShowReward();
   CONFIG.back2top && Stun.utils.back2top();
   CONFIG.gallery_waterfall && Stun.utils.galleryWaterFall();
-  
-  // CONFIG.lazyload && Stun.utils.lazyLoadImages();
+  CONFIG.lazyload && Stun.utils.lazyLoadImages();
   
   if (CONFIG.external_link) {
     var WRAPPER = '.archive-inner, .post-title, #footer';

source/js/utils.js

@@ -213,17 +213,9 @@ Stun.utils = Stun.$u = {
       });
     });
   },
+  // Lazy load the images of post.
   lazyLoadImages: function () {
-    $('.content img').not(':hidden').each(function () {
-      var $img = $(this);
-      var PLACEHOLDER =
-        'data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=';
-      
-      $img.attr('class', 'lazyload');
-      $img.attr('data-original', $img.attr('src'));
-      $img.attr('src', PLACEHOLDER);
-    });
-    $('.content').find('img').lazyload();
+    $('img.lazyload').lazyload();
   },
   // Add a mark icon to the link with `target="_blank"` attribute.
   addIconToExternalLink: function (container) {