Add progressive js

This commit is contained in:
Alexis Tacnet
2017-02-07 00:28:08 +01:00
parent f29c7c2a1c
commit 332e98a42f
4 changed files with 15 additions and 0 deletions

View File

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

View File

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

1
static/css/progressively.min.css vendored Normal file
View File

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

7
static/js/progressively.min.js vendored Normal file
View File

@@ -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});