feat: 懒加载优化

_config.yml

@@ -117,6 +117,6 @@ vendor:
     pace: https://unpkg.com/[email protected]/pace.min.js
     mermaid: https://unpkg.com/[email protected]/dist/mermaid.min.js
   css:
-    highlight: https://cdn.jsdelivr.net/npm/typeface-source-code-pro@latest/index.min.css
+    highlight: https://unpkg.com/typeface-source-code-pro@1.1.13/index.css
     fancybox: https://unpkg.com/@fancyapps/[email protected]/dist/jquery.fancybox.min.css
     katex: https://unpkg.com/[email protected]/dist/katex.min.css

source/css/_partial/article.styl

@@ -110,6 +110,12 @@ $article-meta-tag
     height: auto
     display: block
     margin: auto
+    opacity: 0
+    transition: all 0.3s ease
+
+  img.lazyloaded
+    opacity: 1
+    animation: blur 0.8s ease-in-out forwards
 
   iframe
     border: none
@@ -291,7 +297,7 @@ $article-meta-tag
   img
     display: block
     opacity: 0
-    transition: opacity 200ms ease-out
+    animation: blur 0.8s ease-in-out forwards
     position: absolute
     left: 0
     top: 0

source/css/_partial/friend.styl

@@ -48,6 +48,7 @@
 
     img.lazyloaded
       opacity: 1
+      animation: blur 0.8s ease-in-out forwards
 
 .friend-info-wrap
   display: flex

source/css/_partial/post.styl

@@ -123,7 +123,7 @@ $post-cover
   img
     display: block
     opacity: 0
-    transition: all 0.3s ease
+    transition: opacity 200ms ease-out
     position: absolute
     left: 0
     top: 0
@@ -133,6 +133,7 @@ $post-cover
 
   img.lazyloaded
     opacity: 1
+    animation: blur 0.3s ease-in-out forwards
 
 .post-cover-left
   @media mq-normal

source/css/_partial/sidebar.styl

@@ -45,6 +45,7 @@
 
   img.lazyloaded
     opacity: 1
+    animation: blur 0.8s ease-in-out forwards
 
   .sidebar-author-name
     font-weight: bold

source/css/_util/animation.styl

@@ -0,0 +1,6 @@
+@keyframes blur 
+  0%
+    filter: blur(10px)
+
+  to
+    filter: blur(0)

source/css/style.styl

@@ -2,6 +2,7 @@
 @import "_variables"
 @import "_util/mixin"
 @import "_util/grid"
+@import "_util/animation"
 @import "_extend"
 
 global-reset()

source/js/script.js

@@ -23,6 +23,15 @@ const getRealPath = (pathname, desc = false) => {
 };
 
 (function ($) {
+  // lazysizes
+  const imgs = $('.article-entry img');
+  imgs.each(function() {
+    const src = $(this).attr('src');
+    $(this).addClass('lazyload');
+    $(this).removeAttr('src');
+    $(this).attr('data-src', src);
+    $(this).attr('data-sizes','auto');
+  })
   // Share
   $('body').on('click', function () {
     $('.article-share-box.on').removeClass('on');