From 4c57cab79f8fd0010eae32752feaed6199bab40f Mon Sep 17 00:00:00 2001 From: dinbror Date: Fri, 29 Jul 2016 21:05:37 +0200 Subject: [PATCH 01/14] Create LICENSE Fixed #102 --- LICENSE | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) create mode 100644 LICENSE diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..f3fe393 --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +The MIT License (MIT) + +Copyright (c) 2013-16 Bjørn Klinggaard + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. From 2d2bbe4c3c13673f8343efe4548914e40adb778c Mon Sep 17 00:00:00 2001 From: dinbror Date: Fri, 29 Jul 2016 21:07:44 +0200 Subject: [PATCH 02/14] Fixed #93 --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 94eb7e8..3b03a7d 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,7 @@ bLazy is a lightweight script for lazy loading and multi-serving images, iframes **Table of Contents**
1. [Demo](https://github.com/dinbror/blazy#demo)
-2. [Usage & API](https://github.com/dinbror/blazy#how-to--api)
+2. [Usage & API](https://github.com/dinbror/blazy#usage--api)
3. [Why be lazy?](https://github.com/dinbror/blazy#why-be-lazy)
4. [Changelog](https://github.com/dinbror/blazy#changelog)
5. [License](https://github.com/dinbror/blazy#license)
From f11c19ba901ae8e2237a3f1b95f4dad511b95de0 Mon Sep 17 00:00:00 2001 From: dinbror Date: Mon, 8 Aug 2016 11:52:05 +0200 Subject: [PATCH 03/14] Added badges --- README.md | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 3b03a7d..b094531 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,8 @@ -hey, be lazy -===== +#hey, be lazy +[![Downloads](https://img.shields.io/npm/dm/blazy.svg?style=flat)](https://www.npmjs.com/package/blazy) +[![Latest Stable Version](https://img.shields.io/npm/v/blazy.svg?style=flat)](https://www.npmjs.com/package/blazy) +[![License](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/dinbror/blazy/blob/master/LICENSE) + bLazy is a lightweight script for lazy loading and multi-serving images, iframes, videos and more (less than 1.4KB minified and gzipped). It’s written in pure JavaScript why it doesn’t depend on 3rd-party libraries such as jQuery. It lets you lazy load and multi-serve your images so you can save bandwidth and server requests. The user will have faster load times and save data usage if he/she doesn't browse the whole page. **Table of Contents**
From 6f3c3b61585fbce0f7a9d2ebb07a3bc3ae034119 Mon Sep 17 00:00:00 2001 From: dinbror Date: Fri, 30 Sep 2016 22:29:51 +0200 Subject: [PATCH 04/14] v 1.6.3 released --- README.md | 4 ++++ blazy.js | 13 +++++++------ blazy.min.js | 4 ++-- bower.json | 2 +- package.json | 2 +- 5 files changed, 15 insertions(+), 10 deletions(-) diff --git a/README.md b/README.md index b094531..229c705 100644 --- a/README.md +++ b/README.md @@ -52,6 +52,10 @@ Exchange `latest` with the specific version number if you want to lock it in. * bLazy supports all main module formats like AMD, CommonJS and globals. ## CHANGELOG +### v 1.6.3 (2016/09/30) ### +* Changed event listener to passive listener [#106](https://github.com/dinbror/blazy/pull/106). Thanks [@idoshamun](https://github.com/idoshamun) +* Added support for web components (shadow dom) [#107](https://github.com/dinbror/blazy/pull/107). Thanks again [@idoshamun](https://github.com/idoshamun) + ### v 1.6.2 (2016/05/09) ### * Fixed bug introduced in v.1.6.0, not using retina/breakpoint src [#90](https://github.com/dinbror/blazy/issues/90). diff --git a/blazy.js b/blazy.js index b09b163..04a16dc 100644 --- a/blazy.js +++ b/blazy.js @@ -1,5 +1,5 @@ /*! - hey, [be]Lazy.js - v1.6.2 - 2016.05.09 + hey, [be]Lazy.js - v1.6.3 - 2016.09.30 A fast, small and dependency free lazy load script (https://github.com/dinbror/blazy) (c) Bjoern Klinggaard - @bklinggaard - http://dinbror.dk/blazy */ @@ -48,6 +48,7 @@ scope.options = options || {}; scope.options.error = scope.options.error || false; scope.options.offset = scope.options.offset || 100; + scope.options.root = scope.options.root || document; scope.options.success = scope.options.success || false; scope.options.selector = scope.options.selector || '.b-lazy'; scope.options.separator = scope.options.separator || '|'; @@ -127,7 +128,7 @@ function initialize(self) { var util = self._util; // First we create an array of elements to lazy load - util.elements = toArray(self.options.selector); + util.elements = toArray(self.options); util.count = util.elements.length; // Then we bind resize and scroll events if not already binded if (util.destroyed) { @@ -268,9 +269,9 @@ } } - function toArray(selector) { + function toArray(options) { var array = []; - var nodelist = document.querySelectorAll(selector); + var nodelist = (options.root).querySelectorAll(options.selector); for (var i = nodelist.length; i--; array.unshift(nodelist[i])) {} return array; } @@ -284,7 +285,7 @@ if (ele.attachEvent) { ele.attachEvent && ele.attachEvent('on' + type, fn); } else { - ele.addEventListener(type, fn, false); + ele.addEventListener(type, fn, { capture: false, passive: true }); } } @@ -292,7 +293,7 @@ if (ele.detachEvent) { ele.detachEvent && ele.detachEvent('on' + type, fn); } else { - ele.removeEventListener(type, fn, false); + ele.removeEventListener(type, fn, { capture: false, passive: true }); } } diff --git a/blazy.min.js b/blazy.min.js index 0d4c8a7..db0f8a7 100644 --- a/blazy.min.js +++ b/blazy.min.js @@ -1,6 +1,6 @@ /*! - hey, [be]Lazy.js - v1.6.2 - 2016.05.09 + hey, [be]Lazy.js - v1.6.3 - 2016.09.30 A fast, small and dependency free lazy load script (https://github.com/dinbror/blazy) (c) Bjoern Klinggaard - @bklinggaard - http://dinbror.dk/blazy */ - (function(p,m){"function"===typeof define&&define.amd?define(m):"object"===typeof exports?module.exports=m():p.Blazy=m()})(this,function(){function p(b){var c=b._util;c.elements=B(b.options.selector);c.count=c.elements.length;c.destroyed&&(c.destroyed=!1,b.options.container&&k(b.options.container,function(a){n(a,"scroll",c.validateT)}),n(window,"resize",c.save_viewportOffsetT),n(window,"resize",c.validateT),n(window,"scroll",c.validateT));m(b)}function m(b){for(var c=b._util,a=0;a=e.left&&f.bottom>=e.top&&f.left<=e.right&&f.top<=e.bottom||q(d,b.options.successClass))b.load(d),c.elements.splice(a,1),c.count--,a--}0===c.count&&b.destroy()}function x(b,c,a){if(!q(b,a.successClass)&&(c||a.loadInvisible||0=window.screen.width)return r=a.src,!1});setTimeout(function(){p(a)})}}); \ No newline at end of file + (function(p,m){"function"===typeof define&&define.amd?define(m):"object"===typeof exports?module.exports=m():p.Blazy=m()})(this,function(){function p(b){var c=b._util;c.elements=B(b.options);c.count=c.elements.length;c.destroyed&&(c.destroyed=!1,b.options.container&&k(b.options.container,function(a){n(a,"scroll",c.validateT)}),n(window,"resize",c.saveViewportOffsetT),n(window,"resize",c.validateT),n(window,"scroll",c.validateT));m(b)}function m(b){for(var c=b._util,a=0;a=e.left&&f.bottom>=e.top&&f.left<=e.right&&f.top<=e.bottom||q(d,b.options.successClass))b.load(d),c.elements.splice(a,1),c.count--,a--}0===c.count&&b.destroy()}function x(b,c,a){if(!q(b,a.successClass)&&(c||a.loadInvisible||0=window.screen.width)return r=a.src,!1});setTimeout(function(){p(a)})}}); \ No newline at end of file diff --git a/bower.json b/bower.json index eab2657..89e08a4 100644 --- a/bower.json +++ b/bower.json @@ -1,7 +1,7 @@ { "name": "bLazy", "main": "blazy.js", - "version": "1.6.2", + "version": "1.6.3", "description": "A fast lightweight pure JavaScript script for lazy loading and multi-serving images, iframes, videos and more.", "homepage": "https://github.com/dinbror/blazy", "keywords": [ diff --git a/package.json b/package.json index 812dcc4..986bfea 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "blazy", - "version": "1.6.2", + "version": "1.6.3", "description": "A fast lightweight pure JavaScript script for lazy loading and multi-serving images, iframes, videos and more.", "main": "blazy.js", "keywords": [ From cc3999173b294b1e8b9cec7f1734fd002af026c6 Mon Sep 17 00:00:00 2001 From: m0uH Date: Sat, 8 Oct 2016 23:13:44 +0200 Subject: [PATCH 05/14] Fix transfering multiple images when using srcset (#99) Setting srcset attribute before src attribute on the img element, to prevent two images being transferred from Firefox and Chrome on hidpi displays. Also added srcset attribute to img preload. --- blazy.js | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/blazy.js b/blazy.js index 04a16dc..f99e04b 100644 --- a/blazy.js +++ b/blazy.js @@ -193,8 +193,8 @@ var onLoadHandler = function() { // Is element an image if (isImage) { - setSrc(ele, src); //src handleSource(ele, _attrSrcset, options.srcset); //srcset + setSrc(ele, src); //src //picture element var parent = ele.parentNode; if (parent && equal(parent, 'picture')) { @@ -212,6 +212,12 @@ }; bindEvent(img, 'error', onErrorHandler); bindEvent(img, 'load', onLoadHandler); + + // preloading srcset + var dataSrc = ele.getAttribute(options.srcset); + if (dataSrc) { + img[_attrSrcset] = dataSrc; + } setSrc(img, src); //preload } else { // An item with src like iframe, unity, simpelvideo etc setSrc(ele, src); @@ -315,4 +321,4 @@ fn.apply(scope, arguments); }; } -}); \ No newline at end of file +}); From 19d1faca791fba9feb2d8581694b98394a591b86 Mon Sep 17 00:00:00 2001 From: dinbror Date: Sat, 8 Oct 2016 23:19:35 +0200 Subject: [PATCH 06/14] v. 1.6.4 --- blazy.js | 6 +++--- blazy.min.js | 4 ++-- bower.json | 2 +- package.json | 2 +- 4 files changed, 7 insertions(+), 7 deletions(-) diff --git a/blazy.js b/blazy.js index f99e04b..35ae617 100644 --- a/blazy.js +++ b/blazy.js @@ -1,5 +1,5 @@ /*! - hey, [be]Lazy.js - v1.6.3 - 2016.09.30 + hey, [be]Lazy.js - v1.6.4 - 2016.10.08 A fast, small and dependency free lazy load script (https://github.com/dinbror/blazy) (c) Bjoern Klinggaard - @bklinggaard - http://dinbror.dk/blazy */ @@ -194,7 +194,6 @@ // Is element an image if (isImage) { handleSource(ele, _attrSrcset, options.srcset); //srcset - setSrc(ele, src); //src //picture element var parent = ele.parentNode; if (parent && equal(parent, 'picture')) { @@ -202,6 +201,7 @@ handleSource(source, _attrSrcset, options.srcset); }); } + setSrc(ele, src); //src // or background-image } else { ele.style.backgroundImage = 'url("' + src + '")'; @@ -321,4 +321,4 @@ fn.apply(scope, arguments); }; } -}); +}); \ No newline at end of file diff --git a/blazy.min.js b/blazy.min.js index db0f8a7..0edc1be 100644 --- a/blazy.min.js +++ b/blazy.min.js @@ -1,6 +1,6 @@ /*! - hey, [be]Lazy.js - v1.6.3 - 2016.09.30 + hey, [be]Lazy.js - v1.6.4 - 2016.10.08 A fast, small and dependency free lazy load script (https://github.com/dinbror/blazy) (c) Bjoern Klinggaard - @bklinggaard - http://dinbror.dk/blazy */ - (function(p,m){"function"===typeof define&&define.amd?define(m):"object"===typeof exports?module.exports=m():p.Blazy=m()})(this,function(){function p(b){var c=b._util;c.elements=B(b.options);c.count=c.elements.length;c.destroyed&&(c.destroyed=!1,b.options.container&&k(b.options.container,function(a){n(a,"scroll",c.validateT)}),n(window,"resize",c.saveViewportOffsetT),n(window,"resize",c.validateT),n(window,"scroll",c.validateT));m(b)}function m(b){for(var c=b._util,a=0;a=e.left&&f.bottom>=e.top&&f.left<=e.right&&f.top<=e.bottom||q(d,b.options.successClass))b.load(d),c.elements.splice(a,1),c.count--,a--}0===c.count&&b.destroy()}function x(b,c,a){if(!q(b,a.successClass)&&(c||a.loadInvisible||0=window.screen.width)return r=a.src,!1});setTimeout(function(){p(a)})}}); \ No newline at end of file + (function(p,m){"function"===typeof define&&define.amd?define(m):"object"===typeof exports?module.exports=m():p.Blazy=m()})(this,function(){function p(b){var c=b._util;c.elements=B(b.options);c.count=c.elements.length;c.destroyed&&(c.destroyed=!1,b.options.container&&l(b.options.container,function(a){n(a,"scroll",c.validateT)}),n(window,"resize",c.saveViewportOffsetT),n(window,"resize",c.validateT),n(window,"scroll",c.validateT));m(b)}function m(b){for(var c=b._util,a=0;a=e.left&&f.bottom>=e.top&&f.left<=e.right&&f.top<=e.bottom||q(d,b.options.successClass))b.load(d),c.elements.splice(a,1),c.count--,a--}0===c.count&&b.destroy()}function x(b,c,a){if(!q(b,a.successClass)&&(c||a.loadInvisible||0=window.screen.width)return r=a.src,!1});setTimeout(function(){p(a)})}}); \ No newline at end of file diff --git a/bower.json b/bower.json index 89e08a4..070e615 100644 --- a/bower.json +++ b/bower.json @@ -1,7 +1,7 @@ { "name": "bLazy", "main": "blazy.js", - "version": "1.6.3", + "version": "1.6.4", "description": "A fast lightweight pure JavaScript script for lazy loading and multi-serving images, iframes, videos and more.", "homepage": "https://github.com/dinbror/blazy", "keywords": [ diff --git a/package.json b/package.json index 986bfea..ac8b849 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "blazy", - "version": "1.6.3", + "version": "1.6.4", "description": "A fast lightweight pure JavaScript script for lazy loading and multi-serving images, iframes, videos and more.", "main": "blazy.js", "keywords": [ From 2dfa8930776755f022e58596ff5d6c656855e106 Mon Sep 17 00:00:00 2001 From: dinbror Date: Sat, 8 Oct 2016 23:23:35 +0200 Subject: [PATCH 07/14] v. 1.6.4 --- README.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/README.md b/README.md index 229c705..2e14244 100644 --- a/README.md +++ b/README.md @@ -52,6 +52,9 @@ Exchange `latest` with the specific version number if you want to lock it in. * bLazy supports all main module formats like AMD, CommonJS and globals. ## CHANGELOG +### v 1.6.4 (2016/10/08) ### +* Bugfix: When lazyloading srcset images it also loaded the fallback/regular image [#99](https://github.com/dinbror/blazy/pull/99). Thanks [@m0uH](https://github.com/m0uH) + ### v 1.6.3 (2016/09/30) ### * Changed event listener to passive listener [#106](https://github.com/dinbror/blazy/pull/106). Thanks [@idoshamun](https://github.com/idoshamun) * Added support for web components (shadow dom) [#107](https://github.com/dinbror/blazy/pull/107). Thanks again [@idoshamun](https://github.com/idoshamun) From c0bd5470c27b8442ca07ac2dce69f1d9369b49b0 Mon Sep 17 00:00:00 2001 From: dinbror Date: Sun, 9 Oct 2016 20:06:14 +0200 Subject: [PATCH 08/14] added wish/feature-list requested by you for better overview --- README.md | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/README.md b/README.md index 2e14244..bb01e27 100644 --- a/README.md +++ b/README.md @@ -51,6 +51,15 @@ Exchange `latest` with the specific version number if you want to lock it in. * bLazy supports all browsers used today including legacy browsers like IE7 and 8. * bLazy supports all main module formats like AMD, CommonJS and globals. + +## WISHLIST/NEW FEATURES REQUESTED BY YOU +* Only preload "first frame" of progressive jpegs. +* Add support for CSS background property; [image-set](https://cloudfour.com/examples/image-set/) ([caniuse](http://caniuse.com/#feat=css-image-set)). +* Add a class when the lazyloading begins. +* Option to keen load once on screen images have loaded. +* Add option to disable success/error classes +* Animate the container that contains the image you lazy load. You can do that today by adding/removing a class in the success callback. + ## CHANGELOG ### v 1.6.4 (2016/10/08) ### * Bugfix: When lazyloading srcset images it also loaded the fallback/regular image [#99](https://github.com/dinbror/blazy/pull/99). Thanks [@m0uH](https://github.com/m0uH) From e238f24b5a31a1a47fac57a962e0724a1351e84d Mon Sep 17 00:00:00 2001 From: dinbror Date: Mon, 10 Oct 2016 23:21:07 +0200 Subject: [PATCH 09/14] v. 1.7.0 --- README.md | 4 ++++ blazy.js | 40 ++++++++++++++++++++++++---------------- blazy.min.js | 4 ++-- bower.json | 2 +- package.json | 2 +- 5 files changed, 32 insertions(+), 20 deletions(-) diff --git a/README.md b/README.md index bb01e27..ea47b3b 100644 --- a/README.md +++ b/README.md @@ -61,6 +61,10 @@ Exchange `latest` with the specific version number if you want to lock it in. * Animate the container that contains the image you lazy load. You can do that today by adding/removing a class in the success callback. ## CHANGELOG +### v 1.7.0 (2016/10/10) ### +* Bugfix: When lazyloading picture elements it also loaded the fallback/regular image [#92](https://github.com/dinbror/blazy/issues/92) and [108](https://github.com/dinbror/blazy/pull/108). Thanks [@idoshamun](https://github.com/idoshamun) +* Refactored loadElement function to avoid redundancy. + ### v 1.6.4 (2016/10/08) ### * Bugfix: When lazyloading srcset images it also loaded the fallback/regular image [#99](https://github.com/dinbror/blazy/pull/99). Thanks [@m0uH](https://github.com/m0uH) diff --git a/blazy.js b/blazy.js index 35ae617..46d0e2e 100644 --- a/blazy.js +++ b/blazy.js @@ -1,5 +1,5 @@ /*! - hey, [be]Lazy.js - v1.6.4 - 2016.10.08 + hey, [be]Lazy.js - v1.7.0 - 2016.10.10 A fast, small and dependency free lazy load script (https://github.com/dinbror/blazy) (c) Bjoern Klinggaard - @bklinggaard - http://dinbror.dk/blazy */ @@ -177,7 +177,10 @@ if (dataSrc) { var dataSrcSplitted = dataSrc.split(options.separator); var src = dataSrcSplitted[_isRetina && dataSrcSplitted.length > 1 ? 1 : 0]; + var srcset = ele.getAttribute(options.srcset); var isImage = equal(ele, 'img'); + var parent = ele.parentNode; + var isPicture = parent && equal(parent, 'picture'); // Image or background image if (isImage || ele.src === undefined) { var img = new Image(); @@ -193,15 +196,9 @@ var onLoadHandler = function() { // Is element an image if (isImage) { - handleSource(ele, _attrSrcset, options.srcset); //srcset - //picture element - var parent = ele.parentNode; - if (parent && equal(parent, 'picture')) { - each(parent.getElementsByTagName('source'), function(source) { - handleSource(source, _attrSrcset, options.srcset); - }); + if(!isPicture) { + handleSources(ele, src, srcset); } - setSrc(ele, src); //src // or background-image } else { ele.style.backgroundImage = 'url("' + src + '")'; @@ -210,15 +207,18 @@ unbindEvent(img, 'load', onLoadHandler); unbindEvent(img, 'error', onErrorHandler); }; - bindEvent(img, 'error', onErrorHandler); - bindEvent(img, 'load', onLoadHandler); - // preloading srcset - var dataSrc = ele.getAttribute(options.srcset); - if (dataSrc) { - img[_attrSrcset] = dataSrc; + // Picture element + if (isPicture) { + img = ele; // Image tag inside picture element wont get preloaded + each(parent.getElementsByTagName('source'), function(source) { + handleSource(source, _attrSrcset, options.srcset); + }); } - setSrc(img, src); //preload + bindEvent(img, 'error', onErrorHandler); + bindEvent(img, 'load', onLoadHandler); + handleSources(img, src, srcset); // Preload + } else { // An item with src like iframe, unity, simpelvideo etc setSrc(ele, src); itemLoaded(ele, options); @@ -244,6 +244,7 @@ if (options.success) options.success(ele); // cleanup markup, remove data source attributes ele.removeAttribute(options.src); + ele.removeAttribute(options.srcset); each(options.breakpoints, function(object) { ele.removeAttribute(object.src); }); @@ -261,6 +262,13 @@ } } + function handleSources(ele, src, srcset){ + if(srcset) { + ele[_attrSrcset] = srcset; //srcset + } + setSrc(ele, src); //src + } + function equal(ele, str) { return ele.nodeName.toLowerCase() === str; } diff --git a/blazy.min.js b/blazy.min.js index 0edc1be..a5aa418 100644 --- a/blazy.min.js +++ b/blazy.min.js @@ -1,6 +1,6 @@ /*! - hey, [be]Lazy.js - v1.6.4 - 2016.10.08 + hey, [be]Lazy.js - v1.7.0 - 2016.10.10 A fast, small and dependency free lazy load script (https://github.com/dinbror/blazy) (c) Bjoern Klinggaard - @bklinggaard - http://dinbror.dk/blazy */ - (function(p,m){"function"===typeof define&&define.amd?define(m):"object"===typeof exports?module.exports=m():p.Blazy=m()})(this,function(){function p(b){var c=b._util;c.elements=B(b.options);c.count=c.elements.length;c.destroyed&&(c.destroyed=!1,b.options.container&&l(b.options.container,function(a){n(a,"scroll",c.validateT)}),n(window,"resize",c.saveViewportOffsetT),n(window,"resize",c.validateT),n(window,"scroll",c.validateT));m(b)}function m(b){for(var c=b._util,a=0;a=e.left&&f.bottom>=e.top&&f.left<=e.right&&f.top<=e.bottom||q(d,b.options.successClass))b.load(d),c.elements.splice(a,1),c.count--,a--}0===c.count&&b.destroy()}function x(b,c,a){if(!q(b,a.successClass)&&(c||a.loadInvisible||0=window.screen.width)return r=a.src,!1});setTimeout(function(){p(a)})}}); \ No newline at end of file + (function(n,h){"function"===typeof define&&define.amd?define(h):"object"===typeof exports?module.exports=h():n.Blazy=h()})(this,function(){function n(b){var c=b._util;c.elements=B(b.options);c.count=c.elements.length;c.destroyed&&(c.destroyed=!1,b.options.container&&l(b.options.container,function(a){m(a,"scroll",c.validateT)}),m(window,"resize",c.saveViewportOffsetT),m(window,"resize",c.validateT),m(window,"scroll",c.validateT));h(b)}function h(b){for(var c=b._util,a=0;a=e.left&&f.bottom>=e.top&&f.left<=e.right&&f.top<=e.bottom||p(d,b.options.successClass))b.load(d),c.elements.splice(a,1),c.count--,a--}0===c.count&&b.destroy()}function v(b,c,a){if(!p(b,a.successClass)&&(c||a.loadInvisible||0=window.screen.width)return q=a.src,!1});setTimeout(function(){n(a)})}}); \ No newline at end of file diff --git a/bower.json b/bower.json index 070e615..246519b 100644 --- a/bower.json +++ b/bower.json @@ -1,7 +1,7 @@ { "name": "bLazy", "main": "blazy.js", - "version": "1.6.4", + "version": "1.7.0", "description": "A fast lightweight pure JavaScript script for lazy loading and multi-serving images, iframes, videos and more.", "homepage": "https://github.com/dinbror/blazy", "keywords": [ diff --git a/package.json b/package.json index ac8b849..971c835 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "blazy", - "version": "1.6.4", + "version": "1.7.0", "description": "A fast lightweight pure JavaScript script for lazy loading and multi-serving images, iframes, videos and more.", "main": "blazy.js", "keywords": [ From 7bbb67affd382cceadc158c98d1b723e01236fcf Mon Sep 17 00:00:00 2001 From: dinbror Date: Fri, 14 Oct 2016 21:16:38 +0200 Subject: [PATCH 10/14] v. 1.7.1 --- README.md | 3 +++ blazy.js | 6 +++--- blazy.min.js | 4 ++-- bower.json | 2 +- package.json | 3 ++- 5 files changed, 11 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index ea47b3b..5d275a4 100644 --- a/README.md +++ b/README.md @@ -61,6 +61,9 @@ Exchange `latest` with the specific version number if you want to lock it in. * Animate the container that contains the image you lazy load. You can do that today by adding/removing a class in the success callback. ## CHANGELOG +### v 1.7.1 (2016/10/14) ### +* Bugfix: In safari the picture element always loaded the default/fallback image [#92](https://github.com/dinbror/blazy/issues/92). + ### v 1.7.0 (2016/10/10) ### * Bugfix: When lazyloading picture elements it also loaded the fallback/regular image [#92](https://github.com/dinbror/blazy/issues/92) and [108](https://github.com/dinbror/blazy/pull/108). Thanks [@idoshamun](https://github.com/idoshamun) * Refactored loadElement function to avoid redundancy. diff --git a/blazy.js b/blazy.js index 46d0e2e..a3bf4ac 100644 --- a/blazy.js +++ b/blazy.js @@ -1,5 +1,5 @@ /*! - hey, [be]Lazy.js - v1.7.0 - 2016.10.10 + hey, [be]Lazy.js - v1.7.1 - 2016.10.14 A fast, small and dependency free lazy load script (https://github.com/dinbror/blazy) (c) Bjoern Klinggaard - @bklinggaard - http://dinbror.dk/blazy */ @@ -251,13 +251,13 @@ } function setSrc(ele, src) { - ele[_attrSrc] = src; + ele.setAttribute(_attrSrc, src); } function handleSource(ele, attr, dataAttr) { var dataSrc = ele.getAttribute(dataAttr); if (dataSrc) { - ele[attr] = dataSrc; + ele.setAttribute(attr, dataSrc); ele.removeAttribute(dataAttr); } } diff --git a/blazy.min.js b/blazy.min.js index a5aa418..a958cca 100644 --- a/blazy.min.js +++ b/blazy.min.js @@ -1,6 +1,6 @@ /*! - hey, [be]Lazy.js - v1.7.0 - 2016.10.10 + hey, [be]Lazy.js - v1.7.1 - 2016.10.14 A fast, small and dependency free lazy load script (https://github.com/dinbror/blazy) (c) Bjoern Klinggaard - @bklinggaard - http://dinbror.dk/blazy */ - (function(n,h){"function"===typeof define&&define.amd?define(h):"object"===typeof exports?module.exports=h():n.Blazy=h()})(this,function(){function n(b){var c=b._util;c.elements=B(b.options);c.count=c.elements.length;c.destroyed&&(c.destroyed=!1,b.options.container&&l(b.options.container,function(a){m(a,"scroll",c.validateT)}),m(window,"resize",c.saveViewportOffsetT),m(window,"resize",c.validateT),m(window,"scroll",c.validateT));h(b)}function h(b){for(var c=b._util,a=0;a=e.left&&f.bottom>=e.top&&f.left<=e.right&&f.top<=e.bottom||p(d,b.options.successClass))b.load(d),c.elements.splice(a,1),c.count--,a--}0===c.count&&b.destroy()}function v(b,c,a){if(!p(b,a.successClass)&&(c||a.loadInvisible||0=window.screen.width)return q=a.src,!1});setTimeout(function(){n(a)})}}); \ No newline at end of file + (function(n,h){"function"===typeof define&&define.amd?define(h):"object"===typeof exports?module.exports=h():n.Blazy=h()})(this,function(){function n(b){var c=b._util;c.elements=B(b.options);c.count=c.elements.length;c.destroyed&&(c.destroyed=!1,b.options.container&&l(b.options.container,function(a){m(a,"scroll",c.validateT)}),m(window,"resize",c.saveViewportOffsetT),m(window,"resize",c.validateT),m(window,"scroll",c.validateT));h(b)}function h(b){for(var c=b._util,a=0;a=e.left&&f.bottom>=e.top&&f.left<=e.right&&f.top<=e.bottom||p(d,b.options.successClass))b.load(d),c.elements.splice(a,1),c.count--,a--}0===c.count&&b.destroy()}function v(b,c,a){if(!p(b,a.successClass)&&(c||a.loadInvisible||0=window.screen.width)return q=a.src,!1});setTimeout(function(){n(a)})}}); \ No newline at end of file diff --git a/bower.json b/bower.json index 246519b..e995a1e 100644 --- a/bower.json +++ b/bower.json @@ -1,7 +1,7 @@ { "name": "bLazy", "main": "blazy.js", - "version": "1.7.0", + "version": "1.7.1", "description": "A fast lightweight pure JavaScript script for lazy loading and multi-serving images, iframes, videos and more.", "homepage": "https://github.com/dinbror/blazy", "keywords": [ diff --git a/package.json b/package.json index 971c835..dbedc6c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "blazy", - "version": "1.7.0", + "version": "1.7.1", "description": "A fast lightweight pure JavaScript script for lazy loading and multi-serving images, iframes, videos and more.", "main": "blazy.js", "keywords": [ @@ -12,6 +12,7 @@ "lazyloading", "image", "images", + "picture", "iframe", "video", "unity", From d578d9aada5b6898eff2260e2446ed2f893ff877 Mon Sep 17 00:00:00 2001 From: dinbror Date: Sun, 16 Oct 2016 00:54:19 +0200 Subject: [PATCH 11/14] v. 1.8.0 --- README.md | 3 ++ blazy.js | 85 ++++++++++++++++++++++++++++++++-------------- blazy.min.js | 4 +-- bower.json | 4 ++- example/index.html | 81 ++++++++++++++++++++++++++++++------------- package.json | 5 +-- 6 files changed, 128 insertions(+), 54 deletions(-) diff --git a/README.md b/README.md index 5d275a4..bbcd2da 100644 --- a/README.md +++ b/README.md @@ -61,6 +61,9 @@ Exchange `latest` with the specific version number if you want to lock it in. * Animate the container that contains the image you lazy load. You can do that today by adding/removing a class in the success callback. ## CHANGELOG +### v 1.8.0 (2016/10/16) ### +* Bugfix: Non-visible images being loaded inside container [#23](https://github.com/dinbror/blazy/issues/23) and [#96](https://github.com/dinbror/blazy/issues/96). + ### v 1.7.1 (2016/10/14) ### * Bugfix: In safari the picture element always loaded the default/fallback image [#92](https://github.com/dinbror/blazy/issues/92). diff --git a/blazy.js b/blazy.js index a3bf4ac..b2d38e4 100644 --- a/blazy.js +++ b/blazy.js @@ -1,5 +1,5 @@ /*! - hey, [be]Lazy.js - v1.7.1 - 2016.10.14 + hey, [be]Lazy.js - v1.8.0 - 2016.10.16 A fast, small and dependency free lazy load script (https://github.com/dinbror/blazy) (c) Bjoern Klinggaard - @bklinggaard - http://dinbror.dk/blazy */ @@ -52,9 +52,10 @@ scope.options.success = scope.options.success || false; scope.options.selector = scope.options.selector || '.b-lazy'; scope.options.separator = scope.options.separator || '|'; - scope.options.container = scope.options.container ? document.querySelectorAll(scope.options.container) : false; + scope.options.containerClass = scope.options.container; + scope.options.container = scope.options.containerClass ? document.querySelectorAll(scope.options.containerClass) : false; scope.options.errorClass = scope.options.errorClass || 'b-error'; - scope.options.breakpoints = scope.options.breakpoints || false; // obsolete + scope.options.breakpoints = scope.options.breakpoints || false; scope.options.loadInvisible = scope.options.loadInvisible || false; scope.options.successClass = scope.options.successClass || 'b-loaded'; scope.options.validateDelay = scope.options.validateDelay || 25; @@ -150,7 +151,7 @@ var util = self._util; for (var i = 0; i < util.count; i++) { var element = util.elements[i]; - if (elementInView(element) || hasClass(element, self.options.successClass)) { + if (elementInView(element, self.options) || hasClass(element, self.options.successClass)) { self.load(element); util.elements.splice(i, 1); util.count--; @@ -162,22 +163,48 @@ } } - function elementInView(ele) { + function elementInView(ele, options) { var rect = ele.getBoundingClientRect(); - return ( - // Intersection - rect.right >= _viewport.left && rect.bottom >= _viewport.top && rect.left <= _viewport.right && rect.top <= _viewport.bottom - ); + + if(options.container){ + // Is element inside a container? + var elementContainer = ele.closest(options.containerClass); + if(elementContainer){ + var containerRect = elementContainer.getBoundingClientRect(); + // Is container in view? + if(inView(containerRect, _viewport)){ + var containerRectWithOffset = { + top: containerRect.top - options.offset, + right: containerRect.right + options.offset, + bottom: containerRect.bottom + options.offset, + left: containerRect.left - options.offset + }; + // Is element in view of container? + return inView(rect, containerRectWithOffset); + } else { + return false; + } + } + } + return inView(rect, _viewport); + } + + function inView(rect, viewport){ + // Intersection + return rect.right >= viewport.left && + rect.bottom >= viewport.top && + rect.left <= viewport.right && + rect.top <= viewport.bottom; } function loadElement(ele, force, options) { // if element is visible, not loaded or forced if (!hasClass(ele, options.successClass) && (force || options.loadInvisible || (ele.offsetWidth > 0 && ele.offsetHeight > 0))) { - var dataSrc = ele.getAttribute(_source) || ele.getAttribute(options.src); // fallback to default 'data-src' + var dataSrc = getAttr(ele, _source) || getAttr(ele, 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 srcset = ele.getAttribute(options.srcset); + var srcset = getAttr(ele, options.srcset); var isImage = equal(ele, 'img'); var parent = ele.parentNode; var isPicture = parent && equal(parent, 'picture'); @@ -219,8 +246,8 @@ bindEvent(img, 'load', onLoadHandler); handleSources(img, src, srcset); // Preload - } else { // An item with src like iframe, unity, simpelvideo etc - setSrc(ele, src); + } else { // An item with src like iframe, unity games, simpel video etc + ele.src = src; itemLoaded(ele, options); } } else { @@ -243,30 +270,38 @@ addClass(ele, options.successClass); if (options.success) options.success(ele); // cleanup markup, remove data source attributes - ele.removeAttribute(options.src); - ele.removeAttribute(options.srcset); + removeAttr(ele, options.src); + removeAttr(ele, options.srcset); each(options.breakpoints, function(object) { - ele.removeAttribute(object.src); + removeAttr(ele, object.src); }); } - function setSrc(ele, src) { - ele.setAttribute(_attrSrc, src); - } - function handleSource(ele, attr, dataAttr) { - var dataSrc = ele.getAttribute(dataAttr); + var dataSrc = getAttr(ele, dataAttr); if (dataSrc) { - ele.setAttribute(attr, dataSrc); - ele.removeAttribute(dataAttr); + setAttr(ele, attr, dataSrc); + removeAttr(ele, dataAttr); } } function handleSources(ele, src, srcset){ if(srcset) { - ele[_attrSrcset] = srcset; //srcset + setAttr(ele, _attrSrcset, srcset); //srcset } - setSrc(ele, src); //src + ele.src = src; //src + } + + function setAttr(ele, attr, value){ + ele.setAttribute(attr, value); + } + + function getAttr(ele, attr) { + return ele.getAttribute(attr); + } + + function removeAttr(ele, attr){ + ele.removeAttribute(attr); } function equal(ele, str) { diff --git a/blazy.min.js b/blazy.min.js index a958cca..62773d5 100644 --- a/blazy.min.js +++ b/blazy.min.js @@ -1,6 +1,6 @@ /*! - hey, [be]Lazy.js - v1.7.1 - 2016.10.14 + hey, [be]Lazy.js - v1.8.0 - 2016.10.16 A fast, small and dependency free lazy load script (https://github.com/dinbror/blazy) (c) Bjoern Klinggaard - @bklinggaard - http://dinbror.dk/blazy */ - (function(n,h){"function"===typeof define&&define.amd?define(h):"object"===typeof exports?module.exports=h():n.Blazy=h()})(this,function(){function n(b){var c=b._util;c.elements=B(b.options);c.count=c.elements.length;c.destroyed&&(c.destroyed=!1,b.options.container&&l(b.options.container,function(a){m(a,"scroll",c.validateT)}),m(window,"resize",c.saveViewportOffsetT),m(window,"resize",c.validateT),m(window,"scroll",c.validateT));h(b)}function h(b){for(var c=b._util,a=0;a=e.left&&f.bottom>=e.top&&f.left<=e.right&&f.top<=e.bottom||p(d,b.options.successClass))b.load(d),c.elements.splice(a,1),c.count--,a--}0===c.count&&b.destroy()}function v(b,c,a){if(!p(b,a.successClass)&&(c||a.loadInvisible||0=window.screen.width)return q=a.src,!1});setTimeout(function(){n(a)})}}); \ No newline at end of file + (function(q,m){"function"===typeof define&&define.amd?define(m):"object"===typeof exports?module.exports=m():q.Blazy=m()})(this,function(){function q(b){var c=b._util;c.elements=D(b.options);c.count=c.elements.length;c.destroyed&&(c.destroyed=!1,b.options.container&&l(b.options.container,function(a){n(a,"scroll",c.validateT)}),n(window,"resize",c.saveViewportOffsetT),n(window,"resize",c.validateT),n(window,"scroll",c.validateT));m(b)}function m(b){for(var c=b._util,a=0;a=c.left&&b.bottom>=c.top&&b.left<=c.right&&b.top<=c.bottom}function y(b,c,a){if(!t(b,a.successClass)&&(c||a.loadInvisible||0=window.screen.width)return u=a.src,!1});setTimeout(function(){q(a)})}}); \ No newline at end of file diff --git a/bower.json b/bower.json index e995a1e..18d0ce6 100644 --- a/bower.json +++ b/bower.json @@ -1,7 +1,7 @@ { "name": "bLazy", "main": "blazy.js", - "version": "1.7.1", + "version": "1.8.0", "description": "A fast lightweight pure JavaScript script for lazy loading and multi-serving images, iframes, videos and more.", "homepage": "https://github.com/dinbror/blazy", "keywords": [ @@ -13,6 +13,8 @@ "responsive", "image", "images", + "picture", + "srcset", "javascript", "performance" ], diff --git a/example/index.html b/example/index.html index e42d1ae..89aabc6 100644 --- a/example/index.html +++ b/example/index.html @@ -68,19 +68,31 @@ } .container { background-color: #1E1E1E; - overflow-x: scroll; - overflow-y: hidden; height:0; padding-bottom:66%; } - .list{ + .horizontal.container{ + overflow-x: scroll; + overflow-y: hidden; + } + .horizontal .list{ font-size:0; width:300%; } - .list .wrapper { + .horizontal .list .wrapper { display: inline-block; width:33.3%; } + .vertical.container{ + overflow-x: hidden; + overflow-y: scroll; + } + .vertical .list{ + width: 100%; + } + .vertical .list .wrapper{ + width: 100%; + } img { max-width: 100%; } @@ -154,18 +166,18 @@

How to lazyload

Examples

    -
  1. Lazy load images
    2. -
  2. Lazy load background image
    3. -
  3. Horizontal lazy load
    4. -
  4. Lazy load iframe
    5. -
  5. Lazy load HTML5 video
    6. -
  6. Lazy load script file
    7. +
  7. Lazy load images, regular, retina, srcset and picture element
    8. +
  8. Lazy load background image
    9. +
  9. Lazy load inside container (vertical & horizotal)
    10. +
  10. Lazy load iframe
    11. +
  11. Lazy load HTML5 video
    12. +
  12. Lazy load script file
-
+

1.1: Default lazyload image example

Lazy load images example 1a @@ -227,26 +239,26 @@

1.5: Lazy load image example with picture element

+ data-srcset="http://placehold.it/1024x682?text=Min-650" /> + data-srcset="http://placehold.it/600x400?text=Min-465" /> Lazy load image example with picture element + alt="Lazy load image example with picture element" /> 
     <picture> 
         <source 
              media="(min-width: 650px)"
-             data-srcset="image-650.jpg"> 
+             data-srcset="image-650.jpg" /> 
         <source 
              media="(min-width: 465px)" 
-             data-srcset="image-465.jpg">
+             data-srcset="image-465.jpg" />
         <img class="b-lazy"
-             data-src="default.jpg">
+             data-src="default.jpg" />
     </picture>
@@ -259,7 +271,7 @@

1.6: Lazyload image with retina support example

<img class="b-lazy" data-src="image.jpg|retina-image.jpg" />
-
+

2: Lazy load background image example

@@ -268,9 +280,9 @@

2: Lazy load background image example

<div class="b-lazy" data-src="image.jpg"></div>
-
-

3: Horizontal lazyload inside container example

-
+
+

3.1: Horizontal lazyload inside container example

+
  • Lazy load images example 3 image 1 @@ -290,6 +302,27 @@

    3: Horizontal lazyload inside container example

+

3.2: Vertical lazyload inside container example

+
+
    +
  • + Lazy load images example 3 image 1 +
    • +
  • + Lazy load images example 3 image 2 +
    • +
  • + Lazy load images example 3 image 3 +
    • +
+
+ 
+    var blazy = new Blazy({
+	container: '.container'
+    });
+
+
+

4: Lazy load iframe example

@@ -302,7 +335,7 @@

4: Lazy load iframe example

</iframe>
-
+

5.1: Lazy load HTML5 video example

@@ -328,7 +361,7 @@

5.2: Lazy load HTML5 video advanced example

</video>
-
+

6: Lazy load script example

Check the console log

@@ -347,4 +380,4 @@

6: Lazy load script example

}); - + \ No newline at end of file diff --git a/package.json b/package.json index dbedc6c..30b18d5 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "blazy", - "version": "1.7.1", + "version": "1.8.0", "description": "A fast lightweight pure JavaScript script for lazy loading and multi-serving images, iframes, videos and more.", "main": "blazy.js", "keywords": [ @@ -13,6 +13,7 @@ "image", "images", "picture", + "srcset", "iframe", "video", "unity", @@ -23,7 +24,7 @@ "author": "Bjørn Klinggaard (http://dinbror.dk/blazy)", "repository": { "type": "git", - "url": "https://github.com/dinbror/blazy.git" + "url": "git://github.com/dinbror/blazy.git" }, "bugs": { "url": "https://github.com/dinbror/blazy/issues" From d43871be31379bec438e9fa3ee807c9ef8c47de0 Mon Sep 17 00:00:00 2001 From: dinbror Date: Sat, 22 Oct 2016 23:33:31 +0200 Subject: [PATCH 12/14] v. 1.8.1 --- README.md | 3 +++ blazy.js | 8 ++++---- blazy.min.js | 4 ++-- bower.json | 2 +- example/index.html | 1 + package.json | 2 +- polyfills/closest.js | 29 +++++++++++++++++++++++++++++ 7 files changed, 41 insertions(+), 8 deletions(-) create mode 100644 polyfills/closest.js diff --git a/README.md b/README.md index bbcd2da..74890ee 100644 --- a/README.md +++ b/README.md @@ -61,6 +61,9 @@ Exchange `latest` with the specific version number if you want to lock it in. * Animate the container that contains the image you lazy load. You can do that today by adding/removing a class in the success callback. ## CHANGELOG +### v 1.8.1 (2016/10/22) ### +* Bugfix: Created polyfill and check for support of `Element.closest` which was introduced in the container fix in v. 1.8.0. + ### v 1.8.0 (2016/10/16) ### * Bugfix: Non-visible images being loaded inside container [#23](https://github.com/dinbror/blazy/issues/23) and [#96](https://github.com/dinbror/blazy/issues/96). diff --git a/blazy.js b/blazy.js index b2d38e4..0906eee 100644 --- a/blazy.js +++ b/blazy.js @@ -1,5 +1,5 @@ /*! - hey, [be]Lazy.js - v1.8.0 - 2016.10.16 + hey, [be]Lazy.js - v1.8.1 - 2016.10.22 A fast, small and dependency free lazy load script (https://github.com/dinbror/blazy) (c) Bjoern Klinggaard - @bklinggaard - http://dinbror.dk/blazy */ @@ -21,8 +21,7 @@ 'use strict'; //private vars - var _source, _viewport, _isRetina, _attrSrc = 'src', - _attrSrcset = 'srcset'; + var _source, _viewport, _isRetina, _supportClosest, _attrSrc = 'src', _attrSrcset = 'srcset'; // constructor return function Blazy(options) { @@ -62,6 +61,7 @@ scope.options.saveViewportOffsetDelay = scope.options.saveViewportOffsetDelay || 50; scope.options.srcset = scope.options.srcset || 'data-srcset'; scope.options.src = _source = scope.options.src || 'data-src'; + _supportClosest = Element.prototype.closest; _isRetina = window.devicePixelRatio > 1; _viewport = {}; _viewport.top = 0 - scope.options.offset; @@ -166,7 +166,7 @@ function elementInView(ele, options) { var rect = ele.getBoundingClientRect(); - if(options.container){ + if(options.container && _supportClosest){ // Is element inside a container? var elementContainer = ele.closest(options.containerClass); if(elementContainer){ diff --git a/blazy.min.js b/blazy.min.js index 62773d5..a698b13 100644 --- a/blazy.min.js +++ b/blazy.min.js @@ -1,6 +1,6 @@ /*! - hey, [be]Lazy.js - v1.8.0 - 2016.10.16 + hey, [be]Lazy.js - v1.8.1 - 2016.10.22 A fast, small and dependency free lazy load script (https://github.com/dinbror/blazy) (c) Bjoern Klinggaard - @bklinggaard - http://dinbror.dk/blazy */ - (function(q,m){"function"===typeof define&&define.amd?define(m):"object"===typeof exports?module.exports=m():q.Blazy=m()})(this,function(){function q(b){var c=b._util;c.elements=D(b.options);c.count=c.elements.length;c.destroyed&&(c.destroyed=!1,b.options.container&&l(b.options.container,function(a){n(a,"scroll",c.validateT)}),n(window,"resize",c.saveViewportOffsetT),n(window,"resize",c.validateT),n(window,"scroll",c.validateT));m(b)}function m(b){for(var c=b._util,a=0;a=c.left&&b.bottom>=c.top&&b.left<=c.right&&b.top<=c.bottom}function y(b,c,a){if(!t(b,a.successClass)&&(c||a.loadInvisible||0=window.screen.width)return u=a.src,!1});setTimeout(function(){q(a)})}}); \ No newline at end of file + (function(q,m){"function"===typeof define&&define.amd?define(m):"object"===typeof exports?module.exports=m():q.Blazy=m()})(this,function(){function q(b){var c=b._util;c.elements=E(b.options);c.count=c.elements.length;c.destroyed&&(c.destroyed=!1,b.options.container&&l(b.options.container,function(a){n(a,"scroll",c.validateT)}),n(window,"resize",c.saveViewportOffsetT),n(window,"resize",c.validateT),n(window,"scroll",c.validateT));m(b)}function m(b){for(var c=b._util,a=0;a=c.left&&b.bottom>=c.top&&b.left<=c.right&&b.top<=c.bottom}function z(b,c,a){if(!t(b,a.successClass)&&(c||a.loadInvisible||0=window.screen.width)return u=a.src,!1});setTimeout(function(){q(a)})}}); \ No newline at end of file diff --git a/bower.json b/bower.json index 18d0ce6..7811f6a 100644 --- a/bower.json +++ b/bower.json @@ -1,7 +1,7 @@ { "name": "bLazy", "main": "blazy.js", - "version": "1.8.0", + "version": "1.8.1", "description": "A fast lightweight pure JavaScript script for lazy loading and multi-serving images, iframes, videos and more.", "homepage": "https://github.com/dinbror/blazy", "keywords": [ diff --git a/example/index.html b/example/index.html index 89aabc6..dcce0d7 100644 --- a/example/index.html +++ b/example/index.html @@ -370,6 +370,7 @@

6: Lazy load script example

+