diff --git a/README.md b/README.md index 792643b..5d4d8a0 100644 --- a/README.md +++ b/README.md @@ -53,10 +53,10 @@ First of all, you will need a copy of [jQuery](http://jquery.com) to use Lazy su Lazy is available over [cdnjs](http://cdnjs.com) and [jsDelivr](http://jsdelivr.com) CDN and can directly included to every page. ```HTML - + - + ``` #### Self-Hosted @@ -172,6 +172,7 @@ threshold | *integer* | *500* | Amount of pixels below the v visibleOnly | *boolean* | *false* | Determine if only visible elements should be load. appendScroll | *integer* | *window* | An element to listen on for scroll events, useful when images are stored in a container. scrollDirection | *string* | *both* | Determines the handles scroll direction. Possible values are `both`, `vertical` and `horizontal`. +imageBase | *string* | *null* | If defined this will be used as base path for all images loaded by this instance. defaultImage | *string* | *blank image* | Base64 image string, set as default image source for every image without a predefined source attribute. placeholder | *string* | *null* | Base64 image string, set a background on every element as loading placeholder. delay | *integer* | *-1* | If you want to load all elements at once after page load, then you can specify a delay time in milliseconds. diff --git a/bower.json b/bower.json index 4a1ca01..f0cb47a 100644 --- a/bower.json +++ b/bower.json @@ -1,54 +1,46 @@ { - "name": "jquery-lazy", - "description": "Lazy is a fast, feature-rich and lightweight delayed content loading plugin for jQuery. It's designed to speed up page loading times and decrease traffic to your users by only loading the content in view. You can use Lazy in all vertical and horizontal scroll ways. It supports images in 'img' tags and backgrounds, supplied with css like 'background-image', by default or any other content by custom loaders. On images Lazy can set an default image or a placeholder while loading and supports retina displays as well.", - "version": "0.6.1", - "main": "jquery.lazy.min.js", - "license": - [ - "MIT", - "GPL-2.0" - ], - "ignore": - [ - "*.md", - "*.json" - ], - "keywords": - [ - "lazy", - "lazyload", - "load", - "loader", - "image", - "images", - "background", - "content", - "speed", - "delay", - "delayed", - "pageload", - "performance", - "retina", - "placeholder", - "jquery", - "jquery-plugin" - ], - "authors": - [ - { - "name": "Daniel 'Eisbehr' Kern", - "email": "jquery@eisbehr.de", - "homepage": "http://www.eisbehr.de/" - } - ], - "homepage": "http://jquery.eisbehr.de/lazy/", - "repository": - { - "type": "git", - "url": "git://github.com/eisbehr-/jquery.lazy.git" - }, - "dependencies": - { - "jquery": ">=1.7.0" - } -} \ No newline at end of file + "name": "jquery-lazy", + "description": "Lazy is a fast, feature-rich and lightweight delayed content loading plugin for jQuery. It's designed to speed up page loading times and decrease traffic to your users by only loading the content in view. You can use Lazy in all vertical and horizontal scroll ways. It supports images in 'img' tags and backgrounds, supplied with css like 'background-image', by default or any other content by custom loaders. On images Lazy can set an default image or a placeholder while loading and supports retina displays as well.", + "version": "0.6.2", + "main": "jquery.lazy.min.js", + "license": [ + "MIT", + "GPL-2.0" + ], + "ignore": [ + "*.md", + "*.json" + ], + "keywords": [ + "lazy", + "lazyload", + "load", + "loader", + "image", + "images", + "background", + "content", + "speed", + "delay", + "delayed", + "pageload", + "performance", + "retina", + "placeholder", + "jquery", + "jquery-plugin" + ], + "authors": [{ + "name": "Daniel 'Eisbehr' Kern", + "email": "jquery@eisbehr.de", + "homepage": "http://www.eisbehr.de/" + }], + "homepage": "http://jquery.eisbehr.de/lazy/", + "repository": { + "type": "git", + "url": "git://github.com/eisbehr-/jquery.lazy.git" + }, + "dependencies": { + "jquery": ">=1.7.0" + } +} diff --git a/jquery.lazy.js b/jquery.lazy.js index d4268b9..1f76d8d 100644 --- a/jquery.lazy.js +++ b/jquery.lazy.js @@ -1,5 +1,5 @@ /*! - * jQuery Lazy - v0.6.1 + * jQuery Lazy - v0.6.2 * http://jquery.eisbehr.de/lazy/ * * Copyright 2012 - 2015, Daniel 'Eisbehr' Kern @@ -170,13 +170,17 @@ { // destroy instance if option is enabled if( configuration("autoDestroy") ) + // noinspection JSUnresolvedFunction instance.destroy(); return; } // helper to see if something was changed - var loadTriggered = false; + var loadTriggered = false, + + // get image base once, not on every image loop + imageBase = configuration("imageBase") ? configuration("imageBase") : ""; // loop all available items for( var i = 0; i < items.length; i++ ) @@ -187,7 +191,7 @@ { var element = $(item), tag = item.tagName.toLowerCase(), - attribute = element.attr(configuration("attribute")), + attribute = imageBase + element.attr(configuration("attribute")), customLoader; // is not already handled @@ -208,7 +212,7 @@ element.data(configuration("handledName"), true); // load item - _handleItem(element, tag, customLoader); + _handleItem(element, tag, imageBase, customLoader); } } })(items[i]); @@ -226,10 +230,11 @@ * @access private * @param {object} element * @param {string} tag + * @param {string} imageBase * @param {function} [customLoader] * @return void */ - function _handleItem(element, tag, customLoader) + function _handleItem(element, tag, imageBase, customLoader) { // increment count of items waiting for after load ++_awaitingAfterLoad; @@ -309,7 +314,7 @@ }); // set source - imageObj.attr("src", element.attr(configuration(_isRetinaDisplay && element.attr(configuration("retinaAttribute")) ? "retinaAttribute" : "attribute"))); + imageObj.attr("src", imageBase + element.attr(configuration(_isRetinaDisplay && element.attr(configuration("retinaAttribute")) ? "retinaAttribute" : "attribute"))); // call after load even on cached image if( imageObj.complete ) imageObj.load(); @@ -554,6 +559,7 @@ _instance.destroy = function () { // unbind instance generated events + // noinspection JSUnresolvedFunction $(_instance.config("appendScroll")).off("." + _instance.name, _events.e); // clear events @@ -561,7 +567,9 @@ }; // start using lazy and return all elements to be chainable or instance for further use + // noinspection JSUnresolvedVariable _executeLazy(_instance, _instance.config, elements, _events); + // noinspection JSUnresolvedFunction return _instance.config("chainable") ? elements : _instance; } @@ -590,10 +598,9 @@ visibleOnly : false, appendScroll : window, scrollDirection : "both", + imageBase : null, defaultImage : "data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==", placeholder : null, - - // delay delay : -1, combined : false, diff --git a/jquery.lazy.min.js b/jquery.lazy.min.js index f31682d..965c335 100644 --- a/jquery.lazy.min.js +++ b/jquery.lazy.min.js @@ -1,2 +1,2 @@ -/*! jQuery Lazy 0.6.1 - MIT & GPL-2.0 license - Copyright 2012-2015 Daniel 'Eisbehr' Kern */ -(function(c,n,A,t){function z(f,b,a,l){function e(){x=1b("delay")||b("combined"))l.e=t(b("throttle"),function(k){"resize"===k.type&&(p=q=-1);u(k.all)}),l.a=function(k){h(k);a.push.apply(a,k)},l.g=function(){return a},u(),c(b("appendScroll")).on("scroll."+f.name+" resize."+f.name,l.e)}function h(k){k=c(k).filter(function(){return!c(this).data(b("handledName"))&&(c(this).attr(b("attribute"))||c(this).attr(b("loaderAttribute")))}).data("plugin_"+f.name,f);if(b("onError"))k.on("error."+f.name,function(){m("onError",c(this))});if(b("defaultImage")||b("placeholder"))for(var a=0;ag.top&&-fg.left&&-fa||!b("enableThrottle")||e?l():d=setTimeout(l,a-m)}}function w(){--v;a.size()||v||m("onFinishedAll")}function m(a,h,d){return(a=b(a))?(a.apply(f,c(arguments).slice(1)),!0):!1}var v=0,p=-1,q=-1,x=!1;"event"==b("bind")?e():c(n).load(e)}function r(f,b){var a=this,l=c.extend({},a.configuration,b),e={};a.config=function(b,c){if(c===t)return l[b];l[b]=c;return a};a.addItems=function(b){e.a&&e.a("string"===c.type(b)?c(b):b);return a};a.getItems=function(){return e.g?e.g():{}};a.update=function(b){e.e&&e.e({},!b);return a};a.loadAll=function(){e.e&&e.e({all:!0},!0);return a};a.destroy=function(){c(a.config("appendScroll")).off("."+a.name,e.e);e={}};z(a,a.config,f,e);return a.config("chainable")?f:a}c.fn.Lazy=c.fn.lazy=function(c){return new r(this,c)};c.extend(r.prototype,{name:"lazy",configuration:{chainable:!0,autoDestroy:!0,bind:"load",threshold:500,visibleOnly:!1,appendScroll:n,scrollDirection:"both",defaultImage:"data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==",placeholder:null,delay:-1,combined:!1,attribute:"data-src",retinaAttribute:"data-retina",loaderAttribute:"data-loader",removeAttribute:!0,handledName:"handled",effect:"show",effectTime:0,enableThrottle:!0,throttle:250,beforeLoad:null,afterLoad:null,onError:null,onFinishedAll:null}})})(jQuery,window,document); \ No newline at end of file +/*! jQuery Lazy 0.6.2 - MIT & GPL-2.0 license - Copyright 2012-2015 Daniel 'Eisbehr' Kern */ +!function(t,e,r,n){"use strict";function a(r,n,a,o){function i(){p=e.devicePixelRatio>1,l(a),n("delay")>=0&&setTimeout(function(){u(!0)},n("delay")),(n("delay")<0||n("combined"))&&(o.e=m(n("throttle"),function(t){"resize"===t.type&&(b=v=-1),u(t.all)}),o.a=function(t){l(t),a.push.apply(a,t)},o.g=function(){return a},u(),t(n("appendScroll")).on("scroll."+r.name+" resize."+r.name,o.e))}function l(e){if(e=t(e).filter(function(){return!t(this).data(n("handledName"))&&(t(this).attr(n("attribute"))||t(this).attr(n("loaderAttribute")))}).data("plugin_"+r.name,r),n("onError")&&e.on("error."+r.name,function(){g("onError",t(this))}),n("defaultImage")||n("placeholder"))for(var a=0;ae.top&&-ae.left&&-a=0?b:b=t(e).width()}function s(){return v>=0?v:v=t(e).height()}function m(t,e){var a,o=0;return function(i,l){function u(){o=+new Date,e.call(r,i)}var c=+new Date-o;a&&clearTimeout(a),c>t||!n("enableThrottle")||l?u():a=setTimeout(u,t-c)}}function A(){--h,a.size()||h||g("onFinishedAll")}function g(e){return(e=n(e))?(e.apply(r,t(arguments).slice(1)),!0):!1}var h=0,b=-1,v=-1,p=!1;!function(){"event"==n("bind")?i():t(e).load(i)}()}function o(e,r){var o=this,i=t.extend({},o.configuration,r),l={};return o.config=function(t,e){return e===n?i[t]:(i[t]=e,o)},o.addItems=function(e){return l.a&&l.a("string"===t.type(e)?t(e):e),o},o.getItems=function(){return l.g?l.g():{}},o.update=function(t){return l.e&&l.e({},!t),o},o.loadAll=function(){return l.e&&l.e({all:!0},!0),o},o.destroy=function(){t(o.config("appendScroll")).off("."+o.name,l.e),l={}},a(o,o.config,e,l),o.config("chainable")?e:o}t.fn.Lazy=t.fn.lazy=function(t){return new o(this,t)},t.extend(o.prototype,{name:"lazy",configuration:{chainable:!0,autoDestroy:!0,bind:"load",threshold:500,visibleOnly:!1,appendScroll:e,scrollDirection:"both",imageBase:null,defaultImage:"data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==",placeholder:null,delay:-1,combined:!1,attribute:"data-src",retinaAttribute:"data-retina",loaderAttribute:"data-loader",removeAttribute:!0,handledName:"handled",effect:"show",effectTime:0,enableThrottle:!0,throttle:250,beforeLoad:null,afterLoad:null,onError:null,onFinishedAll:null}})}(jQuery,window,document); \ No newline at end of file diff --git a/lazy.jquery.json b/lazy.jquery.json deleted file mode 100644 index c8e915d..0000000 --- a/lazy.jquery.json +++ /dev/null @@ -1,56 +0,0 @@ -{ - "name": "lazy", - "title": "jQuery Lazy - Delayed Content, Image and Background Loader", - "version": "0.6.1", - "author": - { - "name": "Daniel 'Eisbehr' Kern", - "url": "http://eisbehr.de/" - }, - "licenses": - [ - { - "type": "MIT", - "url": "http://www.opensource.org/licenses/mit-license.php" - }, - { - "type": "GPL-2.0", - "url": "http://www.gnu.org/licenses/gpl-2.0.html" - } - ], - "dependencies": - { - "jquery": ">=1.7.0" - }, - "description": "Lazy is a fast, feature-rich and lightweight delayed content loading plugin for jQuery. It's designed to speed up page loading times and decrease traffic to your users by only loading the content in view. You can use Lazy in all vertical and horizontal scroll ways. It supports images in 'img' tags and backgrounds, supplied with css like 'background-image', by default or any other content by custom loaders. On images Lazy can set an default image or a placeholder while loading and supports retina displays as well.", - "keywords": - [ - "lazy", - "lazyload", - "load", - "loader", - "image", - "images", - "background", - "content", - "speed", - "delay", - "delayed", - "pageload", - "performance", - "retina", - "placeholder", - "jquery", - "jquery-plugin" - ], - "homepage": "http://jquery.eisbehr.de/lazy/", - "demo": "http://jquery.eisbehr.de/lazy/", - "bugs": "http://github.com/eisbehr-/jquery.lazy/issues", - "docs": "http://jquery.eisbehr.de/lazy/", - "download": "http://jquery.eisbehr.de/lazy/", - "files": - [ - "jquery.lazy.js", - "jquery.lazy.min.js" - ] -} \ No newline at end of file diff --git a/package.json b/package.json index a276d82..d155dac 100644 --- a/package.json +++ b/package.json @@ -1,58 +1,46 @@ { - "name": "jquery-lazy", - "title": "jQuery Lazy - Delayed Content, Image and Background Loader", - "version": "0.6.1", - "description": "Lazy is a fast, feature-rich and lightweight delayed content loading plugin for jQuery. It's designed to speed up page loading times and decrease traffic to your users by only loading the content in view.", - "homepage": "http://jquery.eisbehr.de/lazy/", - "author": - { - "name": "Daniel 'Eisbehr' Kern", - "email": "jquery@eisbehr.de", - "url": "http://eisbehr.de/" - }, - "repository": - { - "type": "git", - "url": "git@github.com:eisbehr-/jquery.lazy.git" - }, - "bugs": "http://github.com/eisbehr-/jquery.lazy/issues", - "keywords": - [ - "lazy", - "lazyload", - "load", - "loader", - "image", - "images", - "background", - "content", - "speed", - "delay", - "delayed", - "pageload", - "performance", - "retina", - "placeholder", - "jquery", - "jquery-plugin" - ], - "licenses": - [ - { - "type": "MIT", - "url": "http://www.opensource.org/licenses/mit-license.php" - }, - { - "type": "GPL-2.0", - "url": "http://www.gnu.org/licenses/gpl-2.0.html" - } - ], - "engines": - { - "node": "*" - }, - "dependencies": - { - "jquery": ">=1.7.0" - } -} \ No newline at end of file + "name": "jquery-lazy", + "title": "jQuery Lazy - Delayed Content, Image and Background Loader", + "version": "0.6.2", + "description": "Lazy is a fast, feature-rich and lightweight delayed content loading plugin for jQuery. It's designed to speed up page loading times and decrease traffic to your users by only loading the content in view.", + "homepage": "http://jquery.eisbehr.de/lazy/", + "bugs": "http://github.com/eisbehr-/jquery.lazy/issues", + "author": { + "name": "Daniel 'Eisbehr' Kern", + "email": "jquery@eisbehr.de", + "url": "http://eisbehr.de/" + }, + "repository": { + "type": "git", + "url": "git@github.com:eisbehr-/jquery.lazy.git" + }, + "keywords": [ + "lazy", + "lazyload", + "load", + "loader", + "image", + "images", + "background", + "content", + "speed", + "delay", + "delayed", + "pageload", + "performance", + "retina", + "placeholder", + "jquery", + "jquery-plugin" + ], + "licenses": [{ + "type": "MIT", + "url": "http://www.opensource.org/licenses/mit-license.php" + },{ + "type": "GPL-2.0", + "url": "http://www.gnu.org/licenses/gpl-2.0.html" + }], + "dependencies": { + "jquery": ">=1.7.0" + } +}