From 34047d23fb5e09b6bc2728f0f8827eaa038f02ea Mon Sep 17 00:00:00 2001 From: ArthurHoaro Date: Sun, 1 Mar 2015 10:47:01 +0100 Subject: [PATCH] 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 | 4 +- inc/blazy-1.3.1.js | 232 +++++++++++++++++++++++++++++ inc/blazy-1.3.1.min.js | Bin 0 -> 3138 bytes inc/jquery.lazyload-1.9.3.js | 242 ------------------------------- inc/jquery.lazyload-1.9.3.min.js | Bin 3381 -> 0 bytes inc/shaarli.css | 12 ++ index.php | 7 +- tpl/picwall.html | 12 +- tpl/picwall2.html | 19 --- 9 files changed, 250 insertions(+), 278 deletions(-) create mode 100644 inc/blazy-1.3.1.js create mode 100644 inc/blazy-1.3.1.min.js delete mode 100644 inc/jquery.lazyload-1.9.3.js delete mode 100644 inc/jquery.lazyload-1.9.3.min.js delete mode 100644 tpl/picwall2.html diff --git a/COPYING b/COPYING index 715ba35a..ec4f7681 100644 --- a/COPYING +++ b/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) 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 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; igB}?&s)Nddy5qAK8kO<=xgmwz3n{uDVpQq)olJcn!SoKZnQ0?HJB}NinYkWtEDM67WG5PymwzKFs1j0MtLrTQE2q%bTuZI z)^4t^uFz&`Dif*IRZ4zdyu2bCSyM_|RAs36lI{J0^phm9yA4#Crywgz2!ie#iM6`z zj^UDB`&IfCq#dclSomyr8a^)pY{=rH?CIrXa1^FoaNvq( z==@|$XdR1WaTlja8X4GVAtAi_vdAj)CB4cE?k|>ht$(eI&!T#x3mf{}XEDk{z$+Tc z+%997PGh#uBcaqMe26ezz#aEj*V|rICE1{=NHtriyGS<1V8SkuXcYt^+BEetBpHiy zjAmVJ!I_(}g8|!M?Zx4+PA+EgieiRjf57O|wxw?b21}mw-?qJ&Bd^M`8Z0uqL)*@0 zGi29|lu*~m?@zsY-9I}C`eWPrQ97kk`g9RC!U!yk)9BBr(vnbCr4`sdBs`vPpRG+e z(qh*xT$jRoEnH|P0v)7NN0OTq>%ZDmMQJI45j7;yB{!JqGjyagL^B75;#lvG@_Yw8V@@;hyH98-X->D3o2kNqW~f`v7IfWPSY&_8f-DFXjgp(`XI-?IE$> zp@X4rEM5meh|MzRqjwGh3gTFtvk*2oBR)E9x81L00z2h>;qa5tJswoK;-|GSgvj7*U) z?VF@~^B|B>T3K7IiGyV!1{LE5NvBB+3I2o>QoSdm>V=7w_R7TW9Vb1u6E9_>0yS5su4v;7ZlXiRJ-wu ze8Wq*L%+OjXE$j-r2kMC1i^{%8&KBWLrH7^e4)42nj&p1god^46Bfp9WcOghCE0`5 zXo4A6iCi>6Fu$Q!BOJS(U(curB|Lb))BbtBWd++4U=l=~V(A=XXFey2WmF+P5Kaw^ zi(Sz}79pUMQ6CoNR_H<@ex|1~VeV%ooAei4jSkK@)n#nkFV;CNtTZYs1ypNnh>z6+ znD?TFklng@O4K!eX`@7`kgMEK1G*PTE*qmm|8k-xmp;4vK{R8mA++p}h!X3Mxa}xT ztWTm2plk5Hm;Ab@Yixg?@lnG6o%{(1cC=B`(~5h#5>f2d7tNtaG@9*~n83}nikh-s z7MaBrChi!EPj(T(_QMz@Juu+NU^%<~Y}+H!4~GvL+)9^jj{7#oqIJs%k<$(7xiQ!M zKeXkv*wNG}N&+##C3UB;R>hww)m=w!|C#8W{~ANg$cf$p3=BRro6-Z&cfcG67s1Vzbe^aK(km-QQWw*x^7| zjQgEham^dP<{7u~80-wV=|y|vS)_e+rglE8DP=sJOCU55y7_xN&W>oC4QuEW!k8!?9+nX&IMEsHh2|Eez^9_c^sFcd@~X#NZFIYfW} literal 0 HcmV?d00001 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); - } - $("") - .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 615b90e52fc7d69b0c464505e0dcb1ce6ca5cc16..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 3381 zcmb_e+j84D41M3Pkok~`HBCEhx7(GgW}GzLZ8yE-*6C$B8H$1=I*O!`{7?Sa>R4}IpINbzkQ9KcgEYI%RT!1l zquy?>gFlb0x9U<@XQNS;#=?5o{jC*@5?QJ=u?6#(WIml-i`)WN*dFZ*9wa=*Yht{` zU8n|hQh!^aU7hgUUSDw#GP3Kv`Hn|{h4NyUP9;}`O`Q3f zP>O1T3opHfGJ-PA%xN~H)2ZMw1Z5g{5UQjW(>}x)uQ}yGoR0BSkj8$!ua6lR(x54( z6FkvwdoPAO5Go$!a1pC3Rni>FQJ%DRXU44LB_0kTw~5Fy5ILa?W1Z2N#wlXT)v>Xm zJ1L_aiU==udThlauHhPz(jkS+(>Nv!f&ipmN9mX_nI@%B3FMB)d{K%EQR1E6s04?k zc)3aho>_&>Y4up;kCTkznCS#nUs)_9XgAOv(dHa=B|_+CN!a&90Z*SW^>P3G$+-8= zUtv1HzjvqS(cyWhKM(cK{=wk0{vW)Or*HJf;M2R)liuq=UObUckG0?=IX>Ur9}Es| zhU4pJpO4SA@Qpl-zR2-l@UqZKe;f|JoaZm2Lhs=nC;K1wqfejjqG#<7`&~3240_4C z52J%4tuQ!@U!7f^j*hPm4#=!uCBX`Ic5J`pxIlOhx@1Xa@36qpY&lwd8is?4&= zRE2(#0r8iln14q~m8D%}x z8*)U-O<#4t8yBnVO~(y+Rkjst z_^!g1PQo(k*Be}lIJU79u;XXKCeP6YtNVh`3KF7ik>)MB4}G_eL05c-w1<4PlW1S^ zNcmuEe>LBj!1n4>8Vuw?UM0rD&6#&q#F zoh9>CRS?p{0`6XaPNqD}A+y!eZ9ykUJUa1sO_hh5Yj<|m z1U%D*iW0ErH|NxRLT!mk*pl)bgn!$dZOay%AtN*=&vH^qBnUH5!*yyPahgmppOC99iT0WgG$boV z%yq^Hw#fHvw0>;E#M?=O4ps+1@;xioIw~8En99A^270oJ?1l}Mbn4`6ablUh`@z_T o=zl?Dn~k5xVw;5@A%U5-hsPtxZ`l~1Q0bWYsT^J5NTB_H0j^@64FCWD 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 { diff --git a/index.php b/index.php index 99c37652..890eb581 100644 --- a/index.php +++ b/index.php @@ -2125,11 +2125,8 @@ function lazyThumbnail($url,$href=false) $html=''; - // Lazy image (only loaded by JavaScript when in the viewport). - if (!empty($GLOBALS['disablejquery'])) // (except if jQuery is disabled) - $html.=' {include="includes"} -{if="empty($GLOBALS['disablejquery'])"} - - - -{/if} + @@ -20,12 +16,8 @@ {include="page.footer"} -{if="empty($GLOBALS['disablejquery'])"} -{/if} \ No newline at end of file diff --git a/tpl/picwall2.html b/tpl/picwall2.html deleted file mode 100644 index 44d08b0c..00000000 --- a/tpl/picwall2.html +++ /dev/null @@ -1,19 +0,0 @@ - - -{include="includes"} - - - - -{include="page.footer"} - - \ No newline at end of file