Add progressive js

layouts/partials/footer_scripts.html

@@ -8,3 +8,8 @@
     hljs.initHighlightingOnLoad();
   </script>
 {{ end }}
+
+<script src="{{ .Site.BaseURL }}js/progressively.min.js"></script>
+<script>
+    progressively.init({delay: 50, throttle: 300});
+</script>

layouts/partials/head_includes.html

@@ -7,6 +7,8 @@
 <link rel="stylesheet" href="{{ .Site.BaseURL }}css/reset.css">
 <link rel="stylesheet" href="{{ .Site.BaseURL }}css/main.css">
 
+<link rel="stylesheet" href="{{ .Site.BaseURL }}css/progressively.min.css">
+
 {{range .Site.Params.extracssfiles}}
     <link rel="stylesheet" href="{{.}}">
 {{end}}

static/css/progressively.min.css

@@ -0,0 +1 @@
+.progressive{overflow:hidden;position:relative;background:#efefef}.progressive__img{width:100%;height:100%;position:absolute;-webkit-transform:translateZ(0);transform:translateZ(0)}.progressive--not-loaded{filter:blur(30px);-webkit-filter:blur(30px)}.progressive--is-loaded{filter:blur(20px);-webkit-filter:blur(20px);-webkit-animation:sharpen .5s both;animation:sharpen .5s both}@-webkit-keyframes sharpen{from{filter:blur(20px);-webkit-filter:blur(20px)}to{filter:blur(0);-webkit-filter:blur(0)}}@keyframes sharpen{from{filter:blur(20px);-webkit-filter:blur(20px)}to{filter:blur(0);-webkit-filter:blur(0)}}

static/js/progressively.min.js

@@ -0,0 +1,7 @@
+/*!
+ * progressively 1.0.0
+ * https://github.com/thinker3197/progressively
+ * @license MIT licensed
+ *
+ * Copyright (C) 2016 Ashish
+ */!function(a,b){"function"==typeof define&&define.amd?define(function(){return b(a)}):"object"==typeof exports?module.exports=b:a.progressively=b(a)}(this,function(a){"use strict";function b(a,b){var c={};for(var d in a)c[d]=b.hasOwnProperty(d)?b[d]:a[d];return c}function c(a){return null===a.offsetParent}function d(a,b){if(c(a))return!1;var d=a.getBoundingClientRect();return d.top>=0&&d.left>=0&&d.right<=(window.innerWidth||document.el.clientWidth)&&(d.bottom<=(window.innerHeight||document.el.clientHeight)||a.clientHeight>=window.innerHeight)}function e(a){setTimeout(function(){var b=new Image;b.onload=function(){a.classList.remove("progressive--not-loaded"),a.classList.add("progressive--is-loaded"),a.src=this.src,i(a)},b.src=a.dataset.progressive},g.delay)}function f(){h||(clearTimeout(h),h=setTimeout(function(){k.check(),k.render(),h=null},g.throttle))}var g,h,i,j,k={};return i=function(){},g={throttle:300,delay:100,onLoadComplete:function(){},onLoad:function(){}},k.init=function(c){c=c||{},g=b(g,c),i=g.onLoad||i,j=[].slice.call(document.querySelectorAll(".progressive__img")),k.render(),document.addEventListener?(a.addEventListener("scroll",f,!1),a.addEventListener("load",f,!1)):(a.attachEvent("onscroll",f),a.attachEvent("onload",f))},k.render=function(){for(var a,b=j.length-1;b>=0;--b)a=j[b],d(a)&&a.classList.contains("progressive--not-loaded")&&(e(a),j.splice(b,1));this.check()},k.check=function(){j.length||(g.onLoadComplete(),this.drop())},k.drop=function(){document.removeEventListener?a.removeEventListener("scroll",f):a.detachEvent("onscroll",f),clearTimeout(h)},k});