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

COPYING

@@ -50,9 +50,9 @@ Files: Files: inc/jquery*.js, inc/jquery-ui*.js
 License: MIT License (http://opensource.org/licenses/MIT)
 Copyright: (C) jQuery Foundation and other contributors,https://jquery.com/download/
 
-Files: inc/jquery-lazyload*.js
+Files: inc/blazy*.js
 License: MIT License (http://opensource.org/licenses/MIT)
-Copyright: (C) Mika Tuupola, https://github.com/tuupola
+Copyright: (C) Bjoern Klinggaard - @bklinggaard - http://dinbror.dk/blazy
 
 Files: inc/qr.js
 License: GPLv3 License (http://opensource.org/licenses/gpl-3.0)

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

inc/jquery.lazyload-1.9.3.js

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

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 {

index.php

@@ -2125,11 +2125,8 @@ function lazyThumbnail($url,$href=false)
 
     $html='<a href="'.htmlspecialchars($t['href']).'">';
 
-    // Lazy image (only loaded by JavaScript when in the viewport).
+    // Lazy image
-    if (!empty($GLOBALS['disablejquery'])) // (except if jQuery is disabled)
+    $html.='<img class="b-lazy" src="#" data-src="'.htmlspecialchars($t['src']).'"';
-        $html.='<img class="lazyimage" src="'.htmlspecialchars($t['src']).'"';
-    else
-        $html.='<img class="lazyimage" src="#" data-original="'.htmlspecialchars($t['src']).'"';
 
     if (!empty($t['width']))  $html.=' width="'.htmlspecialchars($t['width']).'"';
     if (!empty($t['height'])) $html.=' height="'.htmlspecialchars($t['height']).'"';

tpl/picwall.html

@@ -1,11 +1,7 @@
 <!DOCTYPE html>
 <html>
 <head>{include="includes"}
-{if="empty($GLOBALS['disablejquery'])"}	
+<script src="inc/blazy-1.3.1.min.js#"></script>
-<script src="inc/jquery-1.11.2.min.js#"></script>
-<script src="inc/jquery-ui-1.11.2.min.js#"></script>
-<script src="inc/jquery.lazyload-1.9.3.min.js#"></script>
-{/if}
 </head>
 <body>
 <div id="pageheader">{include="page.header"}</div>
@@ -20,12 +16,8 @@
 </div>
 {include="page.footer"}
 
-{if="empty($GLOBALS['disablejquery'])"} 
 <script>
-$(document).ready(function() {
+    var bLazy = new Blazy();
-    $("img.lazyimage").show().lazyload();
-});
 </script>
-{/if} 
 </body>
 </html>

tpl/picwall2.html

@@ -1,19 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>{include="includes"}</head>
-<body>
-<div id="pageheader">{include="page.header"}</div>
-<div style="background-color:#003;">
-    {loop="linksToDisplay"}
-    <div style="float:left;width:48%;border-right:2px solid white;height:120px;overflow:hide;">
-	    <div style="float:left;width:120px;text-align:center">{$value.thumbnail}</div>
-	    <a href="{$value.permalink}" style="color:yellow;font-weight:bold;text-decoration:none;">{$value.title|htmlspecialchars}</a><br>
-	    <span style="font-size:8pt;color:#eee;">{$value.description|htmlspecialchars}</span>
-	    <div style="clear:both;"></div>
-	</div><br>
-    {/loop}
-</div>
-
-{include="page.footer"}
-</body>
-</html>