Added lazy loading of gallery images using lazysizes Javascript library

7 files changed, 62 insertions, 14 deletions

diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index fbaaa1c..4857ab7 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -14,6 +14,14 @@
     <link rel="icon" href="{{ .Site.BaseURL }}img/favicon.ico">
     {{ partial "css.html" . }}
     <script src="{{ .Site.BaseURL }}js/modernizr-latest.js"></script>
+    <script src="{{ .Site.BaseURL }}js/lazysizes.min.js"></script>
+    <script src="{{ .Site.BaseURL }}js/ls.noscript.min.js"></script>
+
+    <script>
+        window.lazySizesConfig = window.lazySizesConfig || {};
+        lazySizesConfig.addClasses = true;
+        lazySizesConfig.loadMode = 2;
+    </script>
 
     {{ with .Params.redirect }}
         <!-- Attempt redirect through refresh -->
diff --git a/layouts/shortcodes/gallery.html b/layouts/shortcodes/gallery.html
index 72221d1..890be49 100644
--- a/layouts/shortcodes/gallery.html
+++ b/layouts/shortcodes/gallery.html
@@ -6,12 +6,14 @@
     {{ range $files }}
         <!-- TODO: Figure out why line height causes issues here -->
         <div class="flex-item flex-item-spacing no-line-height">
-            <div class="relative rounded-corners z-depth-1">
-                <img src="{{ $url }}{{ .Name | urlize }}"
-                     class="fill-container-width rounded-corners z-depth-1" />
-                <div class="highlight-block rounded-corners">
-                    <h3 class="white-text">{{ dateFormat "Mon Jan 06, 2006" .ModTime }}</h3>
-                </div>
+            <div class="relative rounded-corners z-depth-1 lazyload" data-noscript="">
+                <noscript>
+                    <img src="{{ $url }}{{ .Name | urlize }}"
+                         class="fill-container-width rounded-corners z-depth-1" />
+                    <div class="highlight-block rounded-corners">
+                        <h3 class="white-text">{{ dateFormat "Mon Jan 06, 2006" .ModTime }}</h3>
+                    </div>
+                </noscript>
             </div>
         </div>
     {{ end }}
diff --git a/static/css/main.css b/static/css/main.css
index c405c70..7bf29f5 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -1,5 +1,32 @@
 
 /* ========================================================================= */
+/* = LAZY LOADING                                                            */
+/* ========================================================================= */
+
+/* NOTE: Assuming that using noscript plugin, so parent has this class! */
+.lazyload,
+.lazyloading img {
+    min-height: 60px;
+    min-width: 33.33%;
+}
+
+.lazyload img {
+    opacity: 0.0;
+    transform: scale(0.8);
+}
+
+.lazyloading img {
+    opacity: 0.5;
+    background: #F7F7F7 url("/img/loader.gif") no-repeat center;
+}
+
+.lazyloaded img {
+    opacity: 1.0;
+    transform: scale(1.0);
+    transition: opacity 700ms;
+}
+
+/* ========================================================================= */
 /* = NAVBAR MENU                                                             */
 /* ========================================================================= */
 
diff --git a/static/img/loader.gif b/static/img/loader.gif
new file mode 100644
index 0000000..e8dae9a
--- /dev/null
+++ b/static/img/loader.gif
diff --git a/static/js/lazysizes.min.js b/static/js/lazysizes.min.js
new file mode 100755
index 0000000..b204729
--- /dev/null
+++ b/static/js/lazysizes.min.js
@@ -0,0 +1,2 @@
+/*! lazysizes - v1.2.0 */
+!function(a,b){var c=b(a,a.document);a.lazySizes=c,"object"==typeof module&&module.exports?module.exports=c:"function"==typeof define&&define.amd&&define(c)}(window,function(a,b){"use strict";if(b.getElementsByClassName){var c,d=b.documentElement,e="addEventListener",f=a[e],g=a.setTimeout,h=a.requestAnimationFrame||g,i=a.setImmediate||g,j=/^picture$/i,k=["load","error","lazyincluded","_lazyloaded"],l={},m=function(a,b){return l[b]||(l[b]=new RegExp("(\\s|^)"+b+"(\\s|$)")),l[b].test(a.className)&&l[b]},n=function(a,b){m(a,b)||(a.className=a.className.trim()+" "+b)},o=function(a,b){var c;(c=m(a,b))&&(a.className=a.className.replace(c," "))},p=function(a,b,c){var d=c?e:"removeEventListener";c&&p(a,b),k.forEach(function(c){a[d](c,b)})},q=function(a,c,d,e,f){var g=b.createEvent("CustomEvent");return g.initCustomEvent(c,!e,!f,d||{}),a.dispatchEvent(g),g},r=function(b,d){var e;(e=a.picturefill||a.respimage||c.pf)?e({reevaluate:!0,elements:[b]}):d&&d.src&&(b.src=d.src)},s=function(a,b){return(getComputedStyle(a,null)||{})[b]},t=function(a,b,d){for(d=d||a.offsetWidth;d<c.minSize&&b&&!a._lazysizesWidth;)d=b.offsetWidth,b=b.parentNode;return d},u=function(b){var c,d=0,e=a.Date,f=function(){c=!1,d=e.now(),b()},j=function(){i(f)},k=function(){h(j)};return function(){if(!c){var a=125-(e.now()-d);c=!0,6>a&&(a=6),g(k,a)}}},v=function(){var i,k,l,t,v,x,y,z,A,B,C,D,E,F,G,H,I=/^img$/i,J=/^iframe$/i,K="onscroll"in a&&!/glebot/.test(navigator.userAgent),L=0,M=0,N=0,O=0,P=function(a){N--,a&&a.target&&p(a.target,P),(!a||0>N||!a.target)&&(N=0)},Q=function(a,b){var c,d=a,e="hidden"!=s(a,"visibility");for(A-=b,D+=b,B-=b,C+=b;e&&(d=d.offsetParent);)e=(s(d,"opacity")||1)>0,e&&"visible"!=s(d,"overflow")&&(c=d.getBoundingClientRect(),e=C>c.left&&B<c.right&&D>c.top-1&&A<c.bottom+1);return e},R=function(){var a,b,d,e,f,g,h,j,m;if((v=c.loadMode)&&8>N&&(a=i.length)){for(b=0,O++,H>M&&1>N&&O>3&&v>2?(M=H,O=0):M=v>1&&O>2&&6>N?G:L;a>b;b++)i[b]&&!i[b]._lazyRace&&(K?((j=i[b].getAttribute("data-expand"))&&(g=1*j)||(g=M),m!==g&&(y=innerWidth+g,z=innerHeight+g,h=-1*g,m=g),d=i[b].getBoundingClientRect(),(D=d.bottom)>=h&&(A=d.top)<=z&&(C=d.right)>=h&&(B=d.left)<=y&&(D||C||B||A)&&(l&&3>N&&!j&&(3>v||4>O)||Q(i[b],g))?(W(i[b]),f=!0,N>6&&(M=L)):!f&&l&&!e&&3>N&&4>O&&v>2&&(k[0]||c.preloadAfterLoad)&&(k[0]||!j&&(D||C||B||A||"auto"!=i[b].getAttribute(c.sizesAttr)))&&(e=k[0]||i[b])):W(i[b]));e&&!f&&W(e)}},S=u(R),T=function(a){n(a.target,c.loadedClass),o(a.target,c.loadingClass),p(a.target,T)},U=function(a,b){try{a.contentWindow.location.replace(b)}catch(c){a.setAttribute("src",b)}},V=function(){var a,b=[],c=function(){for(;b.length;)b.shift()();a=!1};return function(d){b.push(d),a||(a=!0,h(c))}}(),W=function(a){var b,d,e,f,h,i,k,s,u,v,x,y,z=I.test(a.nodeName),A=z&&(a.getAttribute(c.sizesAttr)||a.getAttribute("sizes")),B="auto"==A;(!B&&l||!z||!a.src&&!a.srcset||a.complete||m(a,c.errorClass))&&(B&&(y=a.offsetWidth),a._lazyRace=!0,N++,V(function(){if(a._lazyRace&&delete a._lazyRace,o(a,c.lazyClass),!(u=q(a,"lazybeforeunveil")).defaultPrevented){if(A&&(B?(n(a,c.autosizesClass),w.updateElem(a,!0,y)):a.setAttribute("sizes",A)),i=a.getAttribute(c.srcsetAttr),h=a.getAttribute(c.srcAttr),z&&(k=a.parentNode,s=k&&j.test(k.nodeName||"")),v=u.detail.firesLoad||"src"in a&&(i||h||s),u={target:a},v&&(p(a,P,!0),clearTimeout(t),t=g(P,2500),n(a,c.loadingClass),p(a,T,!0)),s)for(b=k.getElementsByTagName("source"),d=0,e=b.length;e>d;d++)(x=c.customMedia[b[d].getAttribute("data-media")||b[d].getAttribute("media")])&&b[d].setAttribute("media",x),f=b[d].getAttribute(c.srcsetAttr),f&&b[d].setAttribute("srcset",f);i?a.setAttribute("srcset",i):h&&(J.test(a.nodeName)?U(a,h):a.setAttribute("src",h)),(i||s)&&r(a,{src:h})}(!v||a.complete)&&(v?P(u):N--,T(u))}))},X=function(){if(!l){if(Date.now()-x<999)return void g(X,999);var a,b=function(){c.loadMode=3,G=E,S()};l=!0,c.loadMode=3,N||S(),f("scroll",function(){3==c.loadMode&&(G=F,c.loadMode=2),clearTimeout(a),a=g(b,99)},!0)}};return{_:function(){x=Date.now(),i=b.getElementsByClassName(c.lazyClass),k=b.getElementsByClassName(c.lazyClass+" "+c.preloadClass),G=c.expand,E=G,F=G*((c.expFactor+1)/2),H=G*c.expFactor,f("scroll",S,!0),f("resize",S,!0),a.MutationObserver?new MutationObserver(S).observe(d,{childList:!0,subtree:!0,attributes:!0}):(d[e]("DOMNodeInserted",S,!0),d[e]("DOMAttrModified",S,!0),setInterval(S,999)),f("hashchange",S,!0),["focus","mouseover","click","load","transitionend","animationend","webkitAnimationEnd"].forEach(function(a){b[e](a,S,!0)}),/d$|^c/.test(b.readyState)?X():(f("load",X),b[e]("DOMContentLoaded",S),g(X,2e4)),S()},checkElems:S,unveil:W}}(),w=function(){var a,d=function(a,b,c){var d,e,f,g,h=a.parentNode;if(h&&(c=t(a,h,c),g=q(a,"lazybeforesizes",{width:c,dataAttr:!!b}),!g.defaultPrevented&&(c=g.detail.width,c&&c!==a._lazysizesWidth))){if(a._lazysizesWidth=c,c+="px",a.setAttribute("sizes",c),j.test(h.nodeName||""))for(d=h.getElementsByTagName("source"),e=0,f=d.length;f>e;e++)d[e].setAttribute("sizes",c);g.detail.dataAttr||r(a,g.detail)}},e=function(){var b,c=a.length;if(c)for(b=0;c>b;b++)d(a[b])},g=u(e);return{_:function(){a=b.getElementsByClassName(c.autosizesClass),f("resize",g)},checkElems:g,updateElem:d}}(),x=function(){x.i||(x.i=!0,w._(),v._())};return function(){var b,d={lazyClass:"lazyload",loadedClass:"lazyloaded",loadingClass:"lazyloading",preloadClass:"lazypreload",errorClass:"lazyerror",autosizesClass:"lazyautosizes",srcAttr:"data-src",srcsetAttr:"data-srcset",sizesAttr:"data-sizes",minSize:40,customMedia:{},init:!0,expFactor:2,expand:359,loadMode:2};c=a.lazySizesConfig||a.lazysizesConfig||{};for(b in d)b in c||(c[b]=d[b]);a.lazySizesConfig=c,g(function(){c.init&&x()})}(),{cfg:c,autoSizer:w,loader:v,init:x,uP:r,aC:n,rC:o,hC:m,fire:q,gW:t}}});
\ No newline at end of file
diff --git a/static/js/ls.noscript.min.js b/static/js/ls.noscript.min.js
new file mode 100644
index 0000000..a111f97
--- /dev/null
+++ b/static/js/ls.noscript.min.js
@@ -0,0 +1,2 @@
+/*! lazysizes - v1.2.0 */
+!function(){"use strict";if(window.addEventListener){var a={nodeName:""},b=!!window.HTMLPictureElement&&"sizes"in document.createElement("img"),c=window.lazySizes&&lazySizes.cfg||window.lazySizesConfig,d=function(c){var d,e,f,g,h,i=c.target.querySelectorAll("img, iframe");for(d=0;d<i.length;d++)e=i[d].getAttribute("srcset")||"picture"==(i[d].parentNode||a).nodeName.toLowerCase(),!b&&e&&lazySizes.uP(i[d]),i[d].complete||!e&&!i[d].src||(c.detail.firesLoad=!0,g&&h||(h=0,g=function(a){h--,a&&!(1>h)||f||(f=!0,c.detail.firesLoad=!1,lazySizes.fire(c.target,"_lazyloaded",{},!1,!0)),a&&a.target&&(a.target.removeEventListener("load",g),a.target.removeEventListener("error",g))},setTimeout(g,3500)),h++,i[d].addEventListener("load",g),i[d].addEventListener("error",g))};c||(c={},window.lazySizesConfig=c),c.getNoscriptContent=function(a){return a.textContent||a.innerText},addEventListener("lazybeforeunveil",function(a){if(!a.defaultPrevented&&null!=a.target.getAttribute("data-noscript")){var b=a.target.querySelector('noscript, script[type*="html"]')||{},e=c.getNoscriptContent(b);e&&(a.target.innerHTML=e,d(a))}})}}();
\ No newline at end of file
diff --git a/static/js/main.js b/static/js/main.js
index 79eba5b..3440319 100644
--- a/static/js/main.js
+++ b/static/js/main.js
@@ -1,16 +1,23 @@
 $(document).ready(function(){
     // Employ Masonry layout configuration
-    var $container = $(".masonry-flex-container").imagesLoaded(function() {
-        $container.masonry({
-            itemSelector: ".flex-item",
-            columnWidth: ".flex-item",
-            percentPosition: true,
-            transitionDuration: 0 /* Disable animation of transitions */
+    var $container = $(".masonry-flex-container").imagesLoaded()
+        .always(function(instance) {
+            $container.masonry({
+                itemSelector: ".flex-item",
+                columnWidth: ".flex-item",
+                percentPosition: true,
+                transitionDuration: 0 /* Disable animation of transitions */
+            });
+
+            $(window).resize(function() {
+                $container.masonry();
+            });
         });
 
-        $(window).resize(function() {
+    $(".masonry-flex-container").each(function() {
+        this.addEventListener("load", function() {
             $container.masonry();
-        });
+        }, true);
     });
 
     // Attach our lightbox handlers