Lazy load images with the light lib bLazy.js instead of jQuery:

  * Remove jquery.lazyload lib
  * Add blazy lib
  * Add a bit of CSS animation
  * Delete unused picwall2 template

5 files changed, 250 insertions, 244 deletions

diff --git a/inc/blazy-1.3.1.js b/inc/blazy-1.3.1.js
new file mode 100644
index 00000000..cfc2dbde
--- /dev/null
+++ b/inc/blazy-1.3.1.js
@@ -0,0 +1,232 @@
+/*!
+  hey, [be]Lazy.js - v1.3.1 - 2015.02.01 
+  A lazy loading and multi-serving image script
+  (c) Bjoern Klinggaard - @bklinggaard - http://dinbror.dk/blazy
+*/
+;(function(root, blazy) {
+        if (typeof define === 'function' && define.amd) {
+        // AMD. Register bLazy as an anonymous module
+        define(blazy);
+        } else if (typeof exports === 'object') {
+                // Node. Does not work with strict CommonJS, but
+        // only CommonJS-like environments that support module.exports,
+        // like Node. 
+                module.exports = blazy();
+        } else {
+        // Browser globals. Register bLazy on window
+        root.Blazy = blazy();
+        }
+})(this, function () {
+        'use strict';
+        
+        //vars
+        var source, options, viewport, images, count, isRetina, destroyed;
+        //throttle vars
+        var validateT, saveViewportOffsetT;
+        
+        // constructor
+        function Blazy(settings) {
+                //IE7- fallback for missing querySelectorAll support
+                if (!document.querySelectorAll) {
+                        var s=document.createStyleSheet();
+                        document.querySelectorAll = function(r, c, i, j, a) {
+                                a=document.all, c=[], r = r.replace(/\[for\b/gi, '[htmlFor').split(',');
+                                for (i=r.length; i--;) {
+                                        s.addRule(r[i], 'k:v');
+                                        for (j=a.length; j--;) a[j].currentStyle.k && c.push(a[j]);
+                                                s.removeRule(0);
+                                }
+                                return c;
+                        };
+                }
+                //init vars
+                destroyed                               = true;
+                images                                  = [];
+                viewport                                = {};
+                //options
+                options                                 = settings                              || {};
+                options.error                   = options.error                 || false;
+                options.offset                  = options.offset                || 100;
+                options.success                 = options.success               || false;
+                options.selector                = options.selector              || '.b-lazy';
+                options.separator               = options.separator     || '|';
+                options.container               = options.container     ?  document.querySelectorAll(options.container) : false;
+                options.errorClass              = options.errorClass    || 'b-error';
+                options.breakpoints             = options.breakpoints   || false;
+                options.successClass    = options.successClass  || 'b-loaded';
+                options.src = source    = options.src                   || 'data-src';
+                isRetina                                = window.devicePixelRatio > 1;
+                viewport.top                    = 0 - options.offset;
+                viewport.left                   = 0 - options.offset;
+                //throttle, ensures that we don't call the functions too often
+                validateT                               = throttle(validate, 25); 
+                saveViewportOffsetT                     = throttle(saveViewportOffset, 50);
+
+                saveViewportOffset();   
+                                
+                //handle multi-served image src
+                each(options.breakpoints, function(object){
+                        if(object.width >= window.screen.width) {
+                                source = object.src;
+                                return false;
+                        }
+                });
+                
+                // start lazy load
+                initialize();   
+        }
+        
+        /* public functions
+        ************************************/
+        Blazy.prototype.revalidate = function() {
+                initialize();
+        };
+        Blazy.prototype.load = function(element, force){
+                if(!isElementLoaded(element)) loadImage(element, force);
+        };
+        Blazy.prototype.destroy = function(){
+                if(options.container){
+                        each(options.container, function(object){
+                                unbindEvent(object, 'scroll', validateT);
+                        });
+                }
+                unbindEvent(window, 'scroll', validateT);
+                unbindEvent(window, 'resize', validateT);
+                unbindEvent(window, 'resize', saveViewportOffsetT);
+                count = 0;
+                images.length = 0;
+                destroyed = true;
+        };
+        
+        /* private helper functions
+        ************************************/
+        function initialize(){
+                // First we create an array of images to lazy load
+                createImageArray(options.selector);
+                // Then we bind resize and scroll events if not already binded
+                if(destroyed) {
+                        destroyed = false;
+                        if(options.container) {
+                                each(options.container, function(object){
+                                        bindEvent(object, 'scroll', validateT);
+                                });
+                        }
+                        bindEvent(window, 'resize', saveViewportOffsetT);
+                        bindEvent(window, 'resize', validateT);
+                        bindEvent(window, 'scroll', validateT);
+                }
+                // And finally, we start to lazy load. Should bLazy ensure domready?
+                validate();     
+        }
+        
+        function validate() {
+                for(var i = 0; i<count; i++){
+                        var image = images[i];
+                        if(elementInView(image) || isElementLoaded(image)) {
+                                Blazy.prototype.load(image);
+                                images.splice(i, 1);
+                                count--;
+                                i--;
+                        } 
+                }
+                if(count === 0) {
+                        Blazy.prototype.destroy();
+                }
+        }
+        
+        function loadImage(ele, force){
+                // if element is visible
+                if(force || (ele.offsetWidth > 0 && ele.offsetHeight > 0)) {
+                        var dataSrc = ele.getAttribute(source) || ele.getAttribute(options.src); // fallback to default data-src
+                        if(dataSrc) {
+                                var dataSrcSplitted = dataSrc.split(options.separator);
+                                var src = dataSrcSplitted[isRetina && dataSrcSplitted.length > 1 ? 1 : 0];
+                                var img = new Image();
+                                // cleanup markup, remove data source attributes
+                                each(options.breakpoints, function(object){
+                                        ele.removeAttribute(object.src);
+                                });
+                                ele.removeAttribute(options.src);
+                                img.onerror = function() {
+                                        if(options.error) options.error(ele, "invalid");
+                                        ele.className = ele.className + ' ' + options.errorClass;
+                                }; 
+                                img.onload = function() {
+                                        // Is element an image or should we add the src as a background image?
+                                        ele.nodeName.toLowerCase() === 'img' ? ele.src = src : ele.style.backgroundImage = 'url("' + src + '")';        
+                                        ele.className = ele.className + ' ' + options.successClass;     
+                                        if(options.success) options.success(ele);
+                                };
+                                img.src = src; //preload image
+                        } else {
+                                if(options.error) options.error(ele, "missing");
+                                ele.className = ele.className + ' ' + options.errorClass;
+                        }
+                }
+         }
+                        
+        function elementInView(ele) {
+                var rect = ele.getBoundingClientRect();
+                
+                return (
+                        // Intersection
+                        rect.right >= viewport.left
+                        && rect.bottom >= viewport.top
+                        && rect.left <= viewport.right
+                        && rect.top <= viewport.bottom
+                 );
+         }
+         
+         function isElementLoaded(ele) {
+                 return (' ' + ele.className + ' ').indexOf(' ' + options.successClass + ' ') !== -1;
+         }
+         
+         function createImageArray(selector) {
+                var nodelist    = document.querySelectorAll(selector);
+                count                   = nodelist.length;
+                //converting nodelist to array
+                for(var i = count; i--; images.unshift(nodelist[i])){}
+         }
+         
+         function saveViewportOffset(){
+                 viewport.bottom = (window.innerHeight || document.documentElement.clientHeight) + options.offset;
+                 viewport.right = (window.innerWidth || document.documentElement.clientWidth) + options.offset;
+         }
+         
+         function bindEvent(ele, type, fn) {
+                 if (ele.attachEvent) {
+                        ele.attachEvent && ele.attachEvent('on' + type, fn);
+                } else {
+                       ele.addEventListener(type, fn, false);
+                }
+         }
+         
+         function unbindEvent(ele, type, fn) {
+                 if (ele.detachEvent) {
+                        ele.detachEvent && ele.detachEvent('on' + type, fn);
+                } else {
+                       ele.removeEventListener(type, fn, false);
+                }
+         }
+         
+         function each(object, fn){
+                if(object && fn) {
+                        var l = object.length;
+                        for(var i = 0; i<l && fn(object[i], i) !== false; i++){}
+                }
+         }
+         
+         function throttle(fn, minDelay) {
+                 var lastCall = 0;
+                 return function() {
+                         var now = +new Date();
+                         if (now - lastCall < minDelay) {
+                                 return;
+                         }
+                         lastCall = now;
+                         fn.apply(images, arguments);
+                 };
+         }
+        
+         return Blazy;
+});
diff --git a/inc/blazy-1.3.1.min.js b/inc/blazy-1.3.1.min.js
new file mode 100644
index 00000000..55cdc2d5
--- /dev/null
+++ b/inc/blazy-1.3.1.min.js
@@ -0,0 +1,6 @@
+/*!
+  hey, [be]Lazy.js - v1.3.1 - 2015.02.01
+  A lazy loading and multi-serving image script
+  (c) Bjoern Klinggaard - @bklinggaard - http://dinbror.dk/blazy
+*/
+  (function(d,h){"function"===typeof define&&define.amd?define(h):"object"===typeof exports?module.exports=h():d.Blazy=h()})(this,function(){function d(b){if(!document.querySelectorAll){var g=document.createStyleSheet();document.querySelectorAll=function(b,a,e,d,f){f=document.all;a=[];b=b.replace(/\[for\b/gi,"[htmlFor").split(",");for(e=b.length;e--;){g.addRule(b[e],"k:v");for(d=f.length;d--;)f[d].currentStyle.k&&a.push(f[d]);g.removeRule(0)}return a}}m=!0;k=[];e={};a=b||{};a.error=a.error||!1;a.offset=a.offset||100;a.success=a.success||!1;a.selector=a.selector||".b-lazy";a.separator=a.separator||"|";a.container=a.container?document.querySelectorAll(a.container):!1;a.errorClass=a.errorClass||"b-error";a.breakpoints=a.breakpoints||!1;a.successClass=a.successClass||"b-loaded";a.src=r=a.src||"data-src";u=1<window.devicePixelRatio;e.top=0-a.offset;e.left=0-a.offset;f=v(w,25);t=v(x,50);x();n(a.breakpoints,function(b){if(b.width>=window.screen.width)return r=b.src,!1});h()}function h(){y(a.selector);m&&(m=!1,a.container&&n(a.container,function(b){p(b,"scroll",f)}),p(window,"resize",t),p(window,"resize",f),p(window,"scroll",f));w()}function w(){for(var b=0;b<l;b++){var g=k[b],c=g.getBoundingClientRect();if(c.right>=e.left&&c.bottom>=e.top&&c.left<=e.right&&c.top<=e.bottom||-1!==(" "+g.className+" ").indexOf(" "+a.successClass+" "))d.prototype.load(g),k.splice(b,1),l--,b--}0===l&&d.prototype.destroy()}function z(b,g){if(g||0<b.offsetWidth&&0<b.offsetHeight){var c=b.getAttribute(r)||b.getAttribute(a.src);if(c){var c=c.split(a.separator),d=c[u&&1<c.length?1:0],c=new Image;n(a.breakpoints,function(a){b.removeAttribute(a.src)});b.removeAttribute(a.src);c.onerror=function(){a.error&&a.error(b,"invalid");b.className=b.className+" "+a.errorClass};c.onload=function(){"img"===b.nodeName.toLowerCase()?b.src=d:b.style.backgroundImage='url("'+d+'")';b.className=b.className+" "+a.successClass;a.success&&a.success(b)};c.src=d}else a.error&&a.error(b,"missing"),b.className=b.className+" "+a.errorClass}}function y(b){b=document.querySelectorAll(b);for(var a=l=b.length;a--;k.unshift(b[a]));}function x(){e.bottom=(window.innerHeight||document.documentElement.clientHeight)+a.offset;e.right=(window.innerWidth||document.documentElement.clientWidth)+a.offset}function p(b,a,c){b.attachEvent?b.attachEvent&&b.attachEvent("on"+a,c):b.addEventListener(a,c,!1)}function q(b,a,c){b.detachEvent?b.detachEvent&&b.detachEvent("on"+a,c):b.removeEventListener(a,c,!1)}function n(a,d){if(a&&d)for(var c=a.length,e=0;e<c&&!1!==d(a[e],e);e++);}function v(a,d){var c=0;return function(){var e=+new Date;e-c<d||(c=e,a.apply(k,arguments))}}var r,a,e,k,l,u,m,f,t;d.prototype.revalidate=function(){h()};d.prototype.load=function(b,d){-1===(" "+b.className+" ").indexOf(" "+a.successClass+" ")&&z(b,d)};d.prototype.destroy=function(){a.container&&n(a.container,function(a){q(a,"scroll",f)});q(window,"scroll",f);q(window,"resize",f);q(window,"resize",t);l=0;k.length=0;m=!0};return d});
\ No newline at end of file
diff --git a/inc/jquery.lazyload-1.9.3.js b/inc/jquery.lazyload-1.9.3.js
deleted file mode 100644
index 5a22d8ea..00000000
--- a/inc/jquery.lazyload-1.9.3.js
+++ /dev/null
@@ -1,242 +0,0 @@
-/*
- * Lazy Load - jQuery plugin for lazy loading images
- *
- * Copyright (c) 2007-2013 Mika Tuupola
- *
- * Licensed under the MIT license:
- *   http://www.opensource.org/licenses/mit-license.php
- *
- * Project home:
- *   http://www.appelsiini.net/projects/lazyload
- *
- * Version:  1.9.3
- *
- */
-
-(function($, window, document, undefined) {
-    var $window = $(window);
-
-    $.fn.lazyload = function(options) {
-        var elements = this;
-        var $container;
-        var settings = {
-            threshold       : 0,
-            failure_limit   : 0,
-            event           : "scroll",
-            effect          : "show",
-            container       : window,
-            data_attribute  : "original",
-            skip_invisible  : true,
-            appear          : null,
-            load            : null,
-            placeholder     : "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC"
-        };
-
-        function update() {
-            var counter = 0;
-
-            elements.each(function() {
-                var $this = $(this);
-                if (settings.skip_invisible && !$this.is(":visible")) {
-                    return;
-                }
-                if ($.abovethetop(this, settings) ||
-                    $.leftofbegin(this, settings)) {
-                        /* Nothing. */
-                } else if (!$.belowthefold(this, settings) &&
-                    !$.rightoffold(this, settings)) {
-                        $this.trigger("appear");
-                        /* if we found an image we'll load, reset the counter */
-                        counter = 0;
-                } else {
-                    if (++counter > settings.failure_limit) {
-                        return false;
-                    }
-                }
-            });
-
-        }
-
-        if(options) {
-            /* Maintain BC for a couple of versions. */
-            if (undefined !== options.failurelimit) {
-                options.failure_limit = options.failurelimit;
-                delete options.failurelimit;
-            }
-            if (undefined !== options.effectspeed) {
-                options.effect_speed = options.effectspeed;
-                delete options.effectspeed;
-            }
-
-            $.extend(settings, options);
-        }
-
-        /* Cache container as jQuery as object. */
-        $container = (settings.container === undefined ||
-                      settings.container === window) ? $window : $(settings.container);
-
-        /* Fire one scroll event per scroll. Not one scroll event per image. */
-        if (0 === settings.event.indexOf("scroll")) {
-            $container.bind(settings.event, function() {
-                return update();
-            });
-        }
-
-        this.each(function() {
-            var self = this;
-            var $self = $(self);
-
-            self.loaded = false;
-
-            /* If no src attribute given use data:uri. */
-            if ($self.attr("src") === undefined || $self.attr("src") === false) {
-                if ($self.is("img")) {
-                    $self.attr("src", settings.placeholder);
-                }
-            }
-
-            /* When appear is triggered load original image. */
-            $self.one("appear", function() {
-                if (!this.loaded) {
-                    if (settings.appear) {
-                        var elements_left = elements.length;
-                        settings.appear.call(self, elements_left, settings);
-                    }
-                    $("<img />")
-                        .bind("load", function() {
-
-                            var original = $self.attr("data-" + settings.data_attribute);
-                            $self.hide();
-                            if ($self.is("img")) {
-                                $self.attr("src", original);
-                            } else {
-                                $self.css("background-image", "url('" + original + "')");
-                            }
-                            $self[settings.effect](settings.effect_speed);
-
-                            self.loaded = true;
-
-                            /* Remove image from array so it is not looped next time. */
-                            var temp = $.grep(elements, function(element) {
-                                return !element.loaded;
-                            });
-                            elements = $(temp);
-
-                            if (settings.load) {
-                                var elements_left = elements.length;
-                                settings.load.call(self, elements_left, settings);
-                            }
-                        })
-                        .attr("src", $self.attr("data-" + settings.data_attribute));
-                }
-            });
-
-            /* When wanted event is triggered load original image */
-            /* by triggering appear.                              */
-            if (0 !== settings.event.indexOf("scroll")) {
-                $self.bind(settings.event, function() {
-                    if (!self.loaded) {
-                        $self.trigger("appear");
-                    }
-                });
-            }
-        });
-
-        /* Check if something appears when window is resized. */
-        $window.bind("resize", function() {
-            update();
-        });
-
-        /* With IOS5 force loading images when navigating with back button. */
-        /* Non optimal workaround. */
-        if ((/(?:iphone|ipod|ipad).*os 5/gi).test(navigator.appVersion)) {
-            $window.bind("pageshow", function(event) {
-                if (event.originalEvent && event.originalEvent.persisted) {
-                    elements.each(function() {
-                        $(this).trigger("appear");
-                    });
-                }
-            });
-        }
-
-        /* Force initial check if images should appear. */
-        $(document).ready(function() {
-            update();
-        });
-
-        return this;
-    };
-
-    /* Convenience methods in jQuery namespace.           */
-    /* Use as  $.belowthefold(element, {threshold : 100, container : window}) */
-
-    $.belowthefold = function(element, settings) {
-        var fold;
-
-        if (settings.container === undefined || settings.container === window) {
-            fold = (window.innerHeight ? window.innerHeight : $window.height()) + $window.scrollTop();
-        } else {
-            fold = $(settings.container).offset().top + $(settings.container).height();
-        }
-
-        return fold <= $(element).offset().top - settings.threshold;
-    };
-
-    $.rightoffold = function(element, settings) {
-        var fold;
-
-        if (settings.container === undefined || settings.container === window) {
-            fold = $window.width() + $window.scrollLeft();
-        } else {
-            fold = $(settings.container).offset().left + $(settings.container).width();
-        }
-
-        return fold <= $(element).offset().left - settings.threshold;
-    };
-
-    $.abovethetop = function(element, settings) {
-        var fold;
-
-        if (settings.container === undefined || settings.container === window) {
-            fold = $window.scrollTop();
-        } else {
-            fold = $(settings.container).offset().top;
-        }
-
-        return fold >= $(element).offset().top + settings.threshold  + $(element).height();
-    };
-
-    $.leftofbegin = function(element, settings) {
-        var fold;
-
-        if (settings.container === undefined || settings.container === window) {
-            fold = $window.scrollLeft();
-        } else {
-            fold = $(settings.container).offset().left;
-        }
-
-        return fold >= $(element).offset().left + settings.threshold + $(element).width();
-    };
-
-    $.inviewport = function(element, settings) {
-         return !$.rightoffold(element, settings) && !$.leftofbegin(element, settings) &&
-                !$.belowthefold(element, settings) && !$.abovethetop(element, settings);
-     };
-
-    /* Custom selectors for your convenience.   */
-    /* Use as $("img:below-the-fold").something() or */
-    /* $("img").filter(":below-the-fold").something() which is faster */
-
-    $.extend($.expr[":"], {
-        "below-the-fold" : function(a) { return $.belowthefold(a, {threshold : 0}); },
-        "above-the-top"  : function(a) { return !$.belowthefold(a, {threshold : 0}); },
-        "right-of-screen": function(a) { return $.rightoffold(a, {threshold : 0}); },
-        "left-of-screen" : function(a) { return !$.rightoffold(a, {threshold : 0}); },
-        "in-viewport"    : function(a) { return $.inviewport(a, {threshold : 0}); },
-        /* Maintain BC for couple of versions. */
-        "above-the-fold" : function(a) { return !$.belowthefold(a, {threshold : 0}); },
-        "right-of-fold"  : function(a) { return $.rightoffold(a, {threshold : 0}); },
-        "left-of-fold"   : function(a) { return !$.rightoffold(a, {threshold : 0}); }
-    });
-
-})(jQuery, window, document);
diff --git a/inc/jquery.lazyload-1.9.3.min.js b/inc/jquery.lazyload-1.9.3.min.js
deleted file mode 100644
index 615b90e5..00000000
--- a/inc/jquery.lazyload-1.9.3.min.js
+++ /dev/null
@@ -1,2 +0,0 @@
-/*! Lazy Load 1.9.3 - MIT license - Copyright 2010-2013 Mika Tuupola */
-!function(a,b,c,d){var e=a(b);a.fn.lazyload=function(f){function g(){var b=0;i.each(function(){var c=a(this);if(!j.skip_invisible||c.is(":visible"))if(a.abovethetop(this,j)||a.leftofbegin(this,j));else if(a.belowthefold(this,j)||a.rightoffold(this,j)){if(++b>j.failure_limit)return!1}else c.trigger("appear"),b=0})}var h,i=this,j={threshold:0,failure_limit:0,event:"scroll",effect:"show",container:b,data_attribute:"original",skip_invisible:!0,appear:null,load:null,placeholder:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC"};return f&&(d!==f.failurelimit&&(f.failure_limit=f.failurelimit,delete f.failurelimit),d!==f.effectspeed&&(f.effect_speed=f.effectspeed,delete f.effectspeed),a.extend(j,f)),h=j.container===d||j.container===b?e:a(j.container),0===j.event.indexOf("scroll")&&h.bind(j.event,function(){return g()}),this.each(function(){var b=this,c=a(b);b.loaded=!1,(c.attr("src")===d||c.attr("src")===!1)&&c.is("img")&&c.attr("src",j.placeholder),c.one("appear",function(){if(!this.loaded){if(j.appear){var d=i.length;j.appear.call(b,d,j)}a("<img />").bind("load",function(){var d=c.attr("data-"+j.data_attribute);c.hide(),c.is("img")?c.attr("src",d):c.css("background-image","url('"+d+"')"),c[j.effect](j.effect_speed),b.loaded=!0;var e=a.grep(i,function(a){return!a.loaded});if(i=a(e),j.load){var f=i.length;j.load.call(b,f,j)}}).attr("src",c.attr("data-"+j.data_attribute))}}),0!==j.event.indexOf("scroll")&&c.bind(j.event,function(){b.loaded||c.trigger("appear")})}),e.bind("resize",function(){g()}),/(?:iphone|ipod|ipad).*os 5/gi.test(navigator.appVersion)&&e.bind("pageshow",function(b){b.originalEvent&&b.originalEvent.persisted&&i.each(function(){a(this).trigger("appear")})}),a(c).ready(function(){g()}),this},a.belowthefold=function(c,f){var g;return g=f.container===d||f.container===b?(b.innerHeight?b.innerHeight:e.height())+e.scrollTop():a(f.container).offset().top+a(f.container).height(),g<=a(c).offset().top-f.threshold},a.rightoffold=function(c,f){var g;return g=f.container===d||f.container===b?e.width()+e.scrollLeft():a(f.container).offset().left+a(f.container).width(),g<=a(c).offset().left-f.threshold},a.abovethetop=function(c,f){var g;return g=f.container===d||f.container===b?e.scrollTop():a(f.container).offset().top,g>=a(c).offset().top+f.threshold+a(c).height()},a.leftofbegin=function(c,f){var g;return g=f.container===d||f.container===b?e.scrollLeft():a(f.container).offset().left,g>=a(c).offset().left+f.threshold+a(c).width()},a.inviewport=function(b,c){return!(a.rightoffold(b,c)||a.leftofbegin(b,c)||a.belowthefold(b,c)||a.abovethetop(b,c))},a.extend(a.expr[":"],{"below-the-fold":function(b){return a.belowthefold(b,{threshold:0})},"above-the-top":function(b){return!a.belowthefold(b,{threshold:0})},"right-of-screen":function(b){return a.rightoffold(b,{threshold:0})},"left-of-screen":function(b){return!a.rightoffold(b,{threshold:0})},"in-viewport":function(b){return a.inviewport(b,{threshold:0})},"above-the-fold":function(b){return!a.belowthefold(b,{threshold:0})},"right-of-fold":function(b){return a.rightoffold(b,{threshold:0})},"left-of-fold":function(b){return!a.rightoffold(b,{threshold:0})}})}(jQuery,window,document);
\ No newline at end of file
diff --git a/inc/shaarli.css b/inc/shaarli.css
index bb564e99..a88143ca 100644
--- a/inc/shaarli.css
+++ b/inc/shaarli.css
@@ -647,9 +647,21 @@ a.qrcode img {
     float: left;
 }
 
+.b-lazy {
+    -webkit-transition: opacity 500ms ease-in-out;
+    -moz-transition: opacity 500ms ease-in-out;
+    -o-transition: opacity 500ms ease-in-out;
+    transition: opacity 500ms ease-in-out;
+    opacity: 0;
+}
+.b-lazy.b-loaded {
+    opacity: 1;
+}
+
 .picwall_pictureframe img {
     max-width: 100%;
     height: auto;
+    color: transparent;
 } /* Adapt the width of the image */
 
 .picwall_pictureframe a {