New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
vanilla-lazyload
Advanced tools
vanilla-lazyload - npm Package Compare versions
Comparing version 16.1.0 to 17.0.0
287
CHANGELOG.md
| # CHANGELOG | ||
| ## Version 17 | ||
| #### 17.0.0 | ||
| - The `elements_selector` option now defaults to `.lazy` (was `img`) | ||
| - The `cancel_on_exit` option now defaults to `true` (was `false`) | ||
| See [UPGRADE.md](UPGRADE.md) to understand **if** you are impacted by any breaking change and **how** to upgrade from previous versions. | ||
| --- | ||
| **Love this project? 😍 [Buy me a coffee!](https://ko-fi.com/verlok)** | ||
| --- | ||
| ## Version 16 | ||
@@ -9,8 +24,8 @@ | ||
| - Cleaning up `data` attributes from the DOM when finished using them (mainly when elements have finished loading) | ||
| - Improved `destroy` method, which now also removes lazyload's additions to the DOM elements | ||
| - Video elements are now only listening to the `loadeddata` event, no longer to `load` | ||
| - Removed constants containing strings. I thought it would produced shorter minified code, but discovered that terser expands them to strings. | ||
| - Bugfix: when lazily loading videos, the error `_poster_ is undefined` was thrown | ||
| - Bugfix: when selecting native lazy loading, the `loading` class was added without knowing whether or not the loading had started | ||
| - Cleaning up `data` attributes from the DOM when finished using them (mainly when elements have finished loading) | ||
| - Improved `destroy` method, which now also removes lazyload's additions to the DOM elements | ||
| - Video elements are now only listening to the `loadeddata` event, no longer to `load` | ||
| - Removed constants containing strings. I thought it would produced shorter minified code, but discovered that terser expands them to strings. | ||
| - Bugfix: when lazily loading videos, the error `_poster_ is undefined` was thrown | ||
| - Bugfix: when selecting native lazy loading, the `loading` class was added without knowing whether or not the loading had started | ||
@@ -21,11 +36,11 @@ #### 16.0.0 | ||
| - Removed call to deprecated `callback_reveal` | ||
| - Removed deprecated instance `load()` method in favor of the static `LazyLoad.load()` method | ||
| - Replaced `auto_unobserve` with `unobserve_completed`, still defaulting to `true` | ||
| - Introduced a new `unobserve_entered` option (useful to execute lazy functions once) | ||
| - Created a demo called `lazy_functions.html` to show how to execute functions as elements enter the viewport | ||
| - Wrote a new recipe to facilitate the lazy execution of scripts/functions | ||
| - Renamed instance method `resetElementStatus()` to the static `LazyLoad.resetStatus()` | ||
| - Removed the `load_delay` option since there's no more use for it | ||
| - Removed the `load_delay` related demos | ||
| - Removed call to deprecated `callback_reveal` | ||
| - Removed deprecated instance `load()` method in favor of the static `LazyLoad.load()` method | ||
| - Replaced `auto_unobserve` with `unobserve_completed`, still defaulting to `true` | ||
| - Introduced a new `unobserve_entered` option (useful to execute lazy functions once) | ||
| - Created a demo called `lazy_functions.html` to show how to execute functions as elements enter the viewport | ||
| - Wrote a new recipe to facilitate the lazy execution of scripts/functions | ||
| - Renamed instance method `resetElementStatus()` to the static `LazyLoad.resetStatus()` | ||
| - Removed the `load_delay` option since there's no more use for it | ||
| - Removed the `load_delay` related demos | ||
@@ -36,4 +51,4 @@ See [UPGRADE.md](UPGRADE.md) to understand **if** you are impacted by any breaking change and **how** to upgrade from previous versions. | ||
| - Simplified management of the `cancel_on_exit` with less increase/decrease of the `toLoadCount` property | ||
| - Refactored counters functions in a new `lazyload.counters` file | ||
| - Simplified management of the `cancel_on_exit` with less increase/decrease of the `toLoadCount` property | ||
| - Refactored counters functions in a new `lazyload.counters` file | ||
@@ -54,27 +69,27 @@ --- | ||
| - Introduced the new `cancel_on_exit` option. | ||
| - Introduced the `callback_cancel` option, just in case you want to perform any additional action whenever a download gets canceled by `cancel_on_exit`. | ||
| - Created a new demo named `cancel_on_exit.html` so you can try the new `cancel_on_exit` option live. | ||
| - Set `cancel_on_exit` to `true` in the following demos, so you can test how it behaves... | ||
| - `image_ph_inline.html`, with an inline SVG placeholder | ||
| - `image_ph_external.html`, with an external SVG placeholder | ||
| - `delay_test.html`, in conjuction with the `delay_load` option | ||
| - `fade_in.html`, with a beautiful fade-in effect. | ||
| - Introduced the new `cancel_on_exit` option. | ||
| - Introduced the `callback_cancel` option, just in case you want to perform any additional action whenever a download gets canceled by `cancel_on_exit`. | ||
| - Created a new demo named `cancel_on_exit.html` so you can try the new `cancel_on_exit` option live. | ||
| - Set `cancel_on_exit` to `true` in the following demos, so you can test how it behaves... | ||
| - `image_ph_inline.html`, with an inline SVG placeholder | ||
| - `image_ph_external.html`, with an external SVG placeholder | ||
| - `delay_test.html`, in conjuction with the `delay_load` option | ||
| - `fade_in.html`, with a beautiful fade-in effect. | ||
| The `cancel_on_exit` option applies only to images so to the `img` (and `picture`) tags. It doesn't work for background images, `iframe`s nor `video`s. | ||
| The `cancel_on_exit` option will probably default to `true` starting from the next major version, so give it a try! And please report your feedback in the comments of [#438](https://github.com/verlok/lazyload/issues/438). | ||
| The `cancel_on_exit` option will probably default to `true` starting from the next major version, so give it a try! And please report your feedback in the comments of [#438](https://github.com/verlok/vanilla-lazyload/issues/438). | ||
| API | ||
| - Added the `resetElementStatus()` method for when you need to tell LazyLoad to consider an image (or other DOM element) again. This is particularly useful if you change the `data-src` attribute after the previous `data-src` was loaded). See the [API section](README.md#-api) in the README file for more information. | ||
| - Added the `resetElementStatus()` method for when you need to tell LazyLoad to consider an image (or other DOM element) again. This is particularly useful if you change the `data-src` attribute after the previous `data-src` was loaded). See the [API section](README.md#-api) in the README file for more information. | ||
| FIX | ||
| - The `callback_exit` callback was called several times (for every images out of the viewport) at instance creation or upon `update()` calls. Now the callback is properly called only when any element exits the viewport. | ||
| - The `callback_exit` callback was called several times (for every images out of the viewport) at instance creation or upon `update()` calls. Now the callback is properly called only when any element exits the viewport. | ||
| INTERNALS | ||
| - Improved script performance by reducing the number of event listeners used for loading elements. | ||
| - Changed the values that the (internally used) `data-ll-status` attribute can take. Removed the status `"observed"` (it was useless) and introduced status `"delayed"`. | ||
| - Improved script performance by reducing the number of event listeners used for loading elements. | ||
| - Changed the values that the (internally used) `data-ll-status` attribute can take. Removed the status `"observed"` (it was useless) and introduced status `"delayed"`. | ||
@@ -97,8 +112,8 @@ #### 15.1.1 | ||
| - Lazy loading of **one background image** using the `data-bg` attribute, now manages the `load` and `error` events, so they are applied the classes defined in the `class_loading`/`class_loaded`/`class_error`, and the callbacks defined in `callback_loading`/`callback_loaded`/`callback_error`. | ||
| - Lazy loading of **multiple background images** is still possible via the `data-bg-multi` attribute. In this case, the `load` and `error` events are not managed. The `class_applied` and `callback_applied` can be used to understand when the multiple background was applied to the element. | ||
| - Updated background images demos: | ||
| - background-images.html -> single background images | ||
| - background-images-multi.html -> multiple background images | ||
| - Added [UPGRADE.md](UPGRADE.md), a guide on how to upgrade from previous versions (from version 12 up) | ||
| - Lazy loading of **one background image** using the `data-bg` attribute, now manages the `load` and `error` events, so they are applied the classes defined in the `class_loading`/`class_loaded`/`class_error`, and the callbacks defined in `callback_loading`/`callback_loaded`/`callback_error`. | ||
| - Lazy loading of **multiple background images** is still possible via the `data-bg-multi` attribute. In this case, the `load` and `error` events are not managed. The `class_applied` and `callback_applied` can be used to understand when the multiple background was applied to the element. | ||
| - Updated background images demos: | ||
| - background-images.html -> single background images | ||
| - background-images-multi.html -> multiple background images | ||
| - Added [UPGRADE.md](UPGRADE.md), a guide on how to upgrade from previous versions (from version 12 up) | ||
@@ -124,23 +139,23 @@ --- | ||
| - `callback_loading` is called when an element started loading | ||
| - `callback_reveal` is now **⚠ DEPRECATED, use `callback_loading` instead** (it's the same thing, it was just renamed). `callback_reveal` will be removed and will stop working in version 15. | ||
| - `callback_loading` is called when an element started loading | ||
| - `callback_reveal` is now **⚠ DEPRECATED, use `callback_loading` instead** (it's the same thing, it was just renamed). `callback_reveal` will be removed and will stop working in version 15. | ||
| **Instance methods** | ||
| - `update()` method now **also unobserves deleted elements**, instead of just looking for and observing new elements | ||
| - `destroy()` **destroys better** than it did before, `delete`-ing properties instead of setting their values to `null` | ||
| - `load()` method (as an instance method) is now **⚠ DEPRECATED, use the static method instead**. If you were using `aLazyLoadInstance.load(element)` you should change it to `LazyLoad.load(element, settings)`. | ||
| - `update()` method now **also unobserves deleted elements**, instead of just looking for and observing new elements | ||
| - `destroy()` **destroys better** than it did before, `delete`-ing properties instead of setting their values to `null` | ||
| - `load()` method (as an instance method) is now **⚠ DEPRECATED, use the static method instead**. If you were using `aLazyLoadInstance.load(element)` you should change it to `LazyLoad.load(element, settings)`. | ||
| **Static methods** | ||
| - `load()` was added as a static method. Note that if you need to use custom settings, you need to pass them in the `settings` parameter. | ||
| - `load()` was added as a static method. Note that if you need to use custom settings, you need to pass them in the `settings` parameter. | ||
| **Instance properties** | ||
| - Added `toLoadCount`. It's the counter of the elements that haven't been lazyloaded yet. | ||
| - Added `toLoadCount`. It's the counter of the elements that haven't been lazyloaded yet. | ||
| **DOM** | ||
| - Removed the `data-was-processed` attribute, that was added to mark lazy DOM elements as "already managed". If you were manually handling that attribute to obtain some goal, this is a potentially breaking change. You should now refer to the `data-ll-status` instead. | ||
| - Added the `data-ll-status` attribute, which is now used to mark the status of a lazy DOM element. The values it can take are: `observing` (not loaded yet), `loading` (loading started), `loaded` (load completed), `error` (an error has occured), `native` (similar to `observing`, but managed by native lazy loading). | ||
| - Removed the `data-was-processed` attribute, that was added to mark lazy DOM elements as "already managed". If you were manually handling that attribute to obtain some goal, this is a potentially breaking change. You should now refer to the `data-ll-status` instead. | ||
| - Added the `data-ll-status` attribute, which is now used to mark the status of a lazy DOM element. The values it can take are: `observing` (not loaded yet), `loading` (loading started), `loaded` (load completed), `error` (an error has occured), `native` (similar to `observing`, but managed by native lazy loading). | ||
@@ -157,13 +172,13 @@ --- | ||
| - Fixed a JS error that could happen to IE11 users after going offline and back online | ||
| - Minor refactoring for better readibility and lighter code (and files)! | ||
| - Fixed a JS error that could happen to IE11 users after going offline and back online | ||
| - Minor refactoring for better readibility and lighter code (and files)! | ||
| #### 13.0.0 | ||
| - Added the minified version of `dist/lazyload.esm.js` as `dist/lazyload.esm.min.js`, so now you can effortlessly use it with an ES module `import` statement when using `type="module"` | ||
| - Reduced files weight even more! `dist/lazyload.iife.min.js` now weights only 2.03 KB GZipped | ||
| - Removed the `callback_set` callback that was **deprecated** since version 11 in favour of `callback_reveal` | ||
| - Removed sourcemaps (they were probably used only by the authors, but if anyone was actually needing them, we can bring them back) | ||
| - Hidden the `_extends` function inside LazyLoad's scope (it was global before) | ||
| - Updated build tooling: removed Gulp, now using Rollup & Babel only | ||
| - Added the minified version of `dist/lazyload.esm.js` as `dist/lazyload.esm.min.js`, so now you can effortlessly use it with an ES module `import` statement when using `type="module"` | ||
| - Reduced files weight even more! `dist/lazyload.iife.min.js` now weights only 2.03 KB GZipped | ||
| - Removed the `callback_set` callback that was **deprecated** since version 11 in favour of `callback_reveal` | ||
| - Removed sourcemaps (they were probably used only by the authors, but if anyone was actually needing them, we can bring them back) | ||
| - Hidden the `_extends` function inside LazyLoad's scope (it was global before) | ||
| - Updated build tooling: removed Gulp, now using Rollup & Babel only | ||
@@ -218,5 +233,5 @@ ## Version 12 | ||
| - Updated npm dev dependencies | ||
| - Added the new `image_ph_inline.html`, with an inline SVG placeholder | ||
| - Added the new `image_ph_external.html`, with an external SVG placeholder | ||
| - Updated npm dev dependencies | ||
| - Added the new `image_ph_inline.html`, with an inline SVG placeholder | ||
| - Added the new `image_ph_external.html`, with an external SVG placeholder | ||
@@ -237,13 +252,13 @@ #### 12.0.3 | ||
| - Reorganized code | ||
| - Improved native lazy loading demos | ||
| - Aligned console messages throughout all demos. | ||
| - Reorganized code | ||
| - Improved native lazy loading demos | ||
| - Aligned console messages throughout all demos. | ||
| #### 12.0.0-beta.0 | ||
| - Added the `use_native` option which enables _native lazy loading_ (where supported) with the `loading="lazy"` attribute. See #331 | ||
| - Added two demos: | ||
| - native_lazyload_conditional.html which you can use to test the `use_native` option | ||
| - native_lazyload.html which always uses native lazy loading (without JS) just to test how it works beyond the LazyLoad script | ||
| - Refactored the constructor and the `update` method | ||
| - Added the `use_native` option which enables _native lazy loading_ (where supported) with the `loading="lazy"` attribute. See #331 | ||
| - Added two demos: | ||
| - native_lazyload_conditional.html which you can use to test the `use_native` option | ||
| - native_lazyload.html which always uses native lazy loading (without JS) just to test how it works beyond the LazyLoad script | ||
| - Refactored the constructor and the `update` method | ||
@@ -278,20 +293,20 @@ ## Version 11 | ||
| - Changed bundle file name of ES Module from `lazyload.es2015.js` to `lazyload.esm.js` | ||
| - Removed the `to_webp` option (see issue #288) | ||
| - Ceased support and development of LazyLoad v.8 (see issue #306) | ||
| version. If you were using it, please update your code to use `callback_reveal` instead. | ||
| - Private methods like `_setObserver`, `_onIntersection` etc. are now hidden from the outside. | ||
| - Added the `auto_unobserve` boolean option, see API. | ||
| - Bugfix: `loadAll()` didn't unobserve elements. | ||
| - Updated to Jest 24, Babel 7, etc. | ||
| - Fixed dev dependencies vulnerabilities | ||
| - Updated callbacks. See below: | ||
| - Changed bundle file name of ES Module from `lazyload.es2015.js` to `lazyload.esm.js` | ||
| - Removed the `to_webp` option (see issue #288) | ||
| - Ceased support and development of LazyLoad v.8 (see issue #306) | ||
| version. If you were using it, please update your code to use `callback_reveal` instead. | ||
| - Private methods like `_setObserver`, `_onIntersection` etc. are now hidden from the outside. | ||
| - Added the `auto_unobserve` boolean option, see API. | ||
| - Bugfix: `loadAll()` didn't unobserve elements. | ||
| - Updated to Jest 24, Babel 7, etc. | ||
| - Fixed dev dependencies vulnerabilities | ||
| - Updated callbacks. See below: | ||
| Callbacks updated: | ||
| - **Changed** `callback_enter`. This callback is now called whenever an element enters the viewport, even when `load_delay` is set. In previous versions, this callback was delayed until an element started loading if a `load_delay` was set. Note that this is a **possible breaking change**, which you can fix using `callback_reveal` instead. | ||
| - **Renamed** `callback_loaded` is the new name of `callback_load`. | ||
| - **Added** `callback_exit`. This callback is called whenever an element exits the viewport, even if a `load_delay` is set. | ||
| - **Added** `callback_reveal`. This callback is called just after an element starts loading. | ||
| - **Deprecated** `callback_set`. This callback still works\*, but will be removed in the next major | ||
| - **Changed** `callback_enter`. This callback is now called whenever an element enters the viewport, even when `load_delay` is set. In previous versions, this callback was delayed until an element started loading if a `load_delay` was set. Note that this is a **possible breaking change**, which you can fix using `callback_reveal` instead. | ||
| - **Renamed** `callback_loaded` is the new name of `callback_load`. | ||
| - **Added** `callback_exit`. This callback is called whenever an element exits the viewport, even if a `load_delay` is set. | ||
| - **Added** `callback_reveal`. This callback is called just after an element starts loading. | ||
| - **Deprecated** `callback_set`. This callback still works\*, but will be removed in the next major | ||
@@ -314,5 +329,5 @@ \* it didn't work from versions 11.0.0 to 11.0.5, it still works from 11.0.6. | ||
| - Fixed build for those using React + SSR, see #287 | ||
| - TypeScript definitions clearified, see #283 | ||
| - Gulp updated to v.4.0.0 to make it work with node 10 | ||
| - Fixed build for those using React + SSR, see #287 | ||
| - TypeScript definitions clearified, see #283 | ||
| - Gulp updated to v.4.0.0 to make it work with node 10 | ||
@@ -323,4 +338,4 @@ Thanks to @AlexCSR and @muturgan for contributing. | ||
| - Added the ability to know when all images have been downloaded through the `callback_finish` callback. | ||
| - Added the file `demos/print.html` to demo how to print lazy images. | ||
| - Added the ability to know when all images have been downloaded through the `callback_finish` callback. | ||
| - Added the file `demos/print.html` to demo how to print lazy images. | ||
@@ -350,4 +365,4 @@ #### 10.18.0 | ||
| - Refactorized code & improved script performance | ||
| - **BUGFIX**: Fixed webpack import (issue #230) `TypeError: default is not a constructor` | ||
| - Refactorized code & improved script performance | ||
| - **BUGFIX**: Fixed webpack import (issue #230) `TypeError: default is not a constructor` | ||
@@ -360,4 +375,4 @@ #### 10.14.0 | ||
| - Shortened the RegEx for crawlers detection (shaved a few bytes) | ||
| - Released LazyLoad in new module types! Enjoy the new flavours :) | ||
| - Shortened the RegEx for crawlers detection (shaved a few bytes) | ||
| - Released LazyLoad in new module types! Enjoy the new flavours :) | ||
@@ -398,10 +413,10 @@ | Filename | Module Type | Advantages | | ||
| - Added support for the `<video>` HTML tag and descending `<source>` tags. | ||
| Now you can lazily load your videos too! | ||
| - Created the `video.html` demo. | ||
| - Added support for the `<video>` HTML tag and descending `<source>` tags. | ||
| Now you can lazily load your videos too! | ||
| - Created the `video.html` demo. | ||
| #### 10.6.0 | ||
| - Added a demo with a popup layer and images injected after popup open, to help with #196. | ||
| - Updated the `background_images` demo with a custom management of the loading class and the loaded event callback. | ||
| - Added a demo with a popup layer and images injected after popup open, to help with #196. | ||
| - Updated the `background_images` demo with a custom management of the loading class and the loaded event callback. | ||
@@ -462,4 +477,4 @@ #### 10.5.2 | ||
| - as a second parameter in the constructor, after the regular option object, e.g. `var ll = new Lazyload({}, myNodeList)` | ||
| - as a single parameter to the `update()` method, e.g. `ll.update(myNodeList)` | ||
| - as a second parameter in the constructor, after the regular option object, e.g. `var ll = new Lazyload({}, myNodeList)` | ||
| - as a single parameter to the `update()` method, e.g. `ll.update(myNodeList)` | ||
@@ -476,5 +491,5 @@ #### 10.1.0 | ||
| - Change in default options: | ||
| - default for `data_src` is now `src` (was `original`) | ||
| - default for `data_srcset` is now `srcset` (was `original-set`) | ||
| - Change in default options: | ||
| - default for `data_src` is now `src` (was `original`) | ||
| - default for `data_srcset` is now `srcset` (was `original-set`) | ||
@@ -485,4 +500,4 @@ ## Version 9 | ||
| - Restored tests using Jest | ||
| - Squashed a bug which didn't make images inside `picture` load correctly | ||
| - Restored tests using Jest | ||
| - Squashed a bug which didn't make images inside `picture` load correctly | ||
@@ -499,4 +514,4 @@ #### 9.0.0 | ||
| - Added the ability to know when all images have been downloaded through the `callback_finish` callback. | ||
| - Added the file `demos/print.html` to demo how to print lazy images. | ||
| - Added the ability to know when all images have been downloaded through the `callback_finish` callback. | ||
| - Added the file `demos/print.html` to demo how to print lazy images. | ||
@@ -517,4 +532,4 @@ #### 8.16.0 | ||
| - Refactorized code & improved script performance | ||
| - **BUGFIX**: Fixed webpack import (issue #230) `TypeError: default is not a constructor` | ||
| - Refactorized code & improved script performance | ||
| - **BUGFIX**: Fixed webpack import (issue #230) `TypeError: default is not a constructor` | ||
@@ -527,4 +542,4 @@ #### 8.14.0 | ||
| - Shortened the RegEx for crawlers detection (shaved a few bytes) | ||
| - Released LazyLoad in new module types! Enjoy the new flavours :) | ||
| - Shortened the RegEx for crawlers detection (shaved a few bytes) | ||
| - Released LazyLoad in new module types! Enjoy the new flavours :) | ||
@@ -584,5 +599,5 @@ | Filename | Module Type | Advantages | | ||
| - Change in default options, in order to be aligned with version 10 | ||
| - default for `data_src` is now `src` (was `original`) | ||
| - default for `data_srcset` is now `srcset` (was `original-set`) | ||
| - Change in default options, in order to be aligned with version 10 | ||
| - default for `data_src` is now `src` (was `original`) | ||
| - default for `data_srcset` is now `srcset` (was `original-set`) | ||
@@ -615,4 +630,4 @@ #### 8.2.1 | ||
| - The main file to include is now **`dist/lazyload.min.js`** as you would expect, and no longer `dist/lazyload.transpiled.min.js`. | ||
| - The non-transpiled version is now named lazyload.es2015.js | ||
| - The main file to include is now **`dist/lazyload.min.js`** as you would expect, and no longer `dist/lazyload.transpiled.min.js`. | ||
| - The non-transpiled version is now named lazyload.es2015.js | ||
@@ -623,8 +638,8 @@ ## Version 7 | ||
| - Now using `element.dataset` to read data attributes | ||
| - New readme! New website! | ||
| - Now using `element.dataset` to read data attributes | ||
| - New readme! New website! | ||
| Bug fixes: | ||
| - Fixed #87 | ||
| - Fixed #87 | ||
@@ -635,4 +650,4 @@ **IMPORTANT!** Browser support changed. Find more information in the [README](README.md) file. | ||
| - Refactored code now using more modules | ||
| - Saving ~0.5 kb of transpiled code going back from ES2015 `class` to function's `prototype` | ||
| - Refactored code now using more modules | ||
| - Saving ~0.5 kb of transpiled code going back from ES2015 `class` to function's `prototype` | ||
@@ -651,3 +666,3 @@ #### 7.0.0 | ||
| - Added the ability to load LazyLoad using an async script | ||
| - Added the ability to load LazyLoad using an async script | ||
@@ -660,38 +675,38 @@ #### 6.1.x | ||
| - Source code migrated to ES6 / ES2015 | ||
| - Serving both minified ES6 version and minified transpiled-to-ES5 version | ||
| - Source code migrated to ES6 / ES2015 | ||
| - Serving both minified ES6 version and minified transpiled-to-ES5 version | ||
| ## Version 5 | ||
| - Exposed private functions for test coverage | ||
| - Test coverage | ||
| - Exposed private functions for test coverage | ||
| - Test coverage | ||
| ## Version 4 | ||
| - Lighter constructor | ||
| - Performance improvements | ||
| - Bugfix: null on background images | ||
| - Removed code for legacy browsers - now supporting IE10+ | ||
| - Lighter constructor | ||
| - Performance improvements | ||
| - Bugfix: null on background images | ||
| - Removed code for legacy browsers - now supporting IE10+ | ||
| ## Version 3 | ||
| - Added support to the picture tag | ||
| - Removed the "show image only when fully loaded" mode | ||
| - Dumped the show_while_loading and placeholder options | ||
| - Added support to the picture tag | ||
| - Removed the "show image only when fully loaded" mode | ||
| - Dumped the show_while_loading and placeholder options | ||
| ## Version 2 | ||
| - Added support to lazily load iframes and background images | ||
| - Added error management callback and error class option | ||
| - Performance improvements | ||
| - Added support to lazily load iframes and background images | ||
| - Added error management callback and error class option | ||
| - Performance improvements | ||
| ## Version 1 | ||
| - Added support to the srcset attribute for images | ||
| - Added typescript typings + updated dist folder files | ||
| - Performance improvements | ||
| - Stable release of LazyLoad | ||
| - Added support to the srcset attribute for images | ||
| - Added typescript typings + updated dist folder files | ||
| - Performance improvements | ||
| - Stable release of LazyLoad | ||
| --- | ||
| _Want more detail? Take a look at the [release history](https://github.com/verlok/lazyload/releases) on GitHub_! | ||
| _Want more detail? Take a look at the [release history](https://github.com/verlok/vanilla-lazyload/releases) on GitHub_! |
@@ -28,3 +28,3 @@ define(function () { 'use strict'; | ||
| var defaultSettings = { | ||
| elements_selector: "IMG", | ||
| elements_selector: ".lazy", | ||
| container: isBot || runningOnBrowser ? document : null, | ||
@@ -47,3 +47,3 @@ threshold: 300, | ||
| unobserve_entered: false, | ||
| cancel_on_exit: false, | ||
| cancel_on_exit: true, | ||
| callback_enter: null, | ||
@@ -50,0 +50,0 @@ callback_exit: null, |
@@ -1,1 +0,1 @@ | ||
| define((function(){"use strict";function n(){return(n=Object.assign||function(n){for(var t=1;t<arguments.length;t++){var e=arguments[t];for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&(n[i]=e[i])}return n}).apply(this,arguments)}var t="undefined"!=typeof window,e=t&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),i=t&&"IntersectionObserver"in window,a=t&&"classList"in document.createElement("p"),r=t&&window.devicePixelRatio>1,o={elements_selector:"IMG",container:e||t?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",data_bg_hidpi:"bg-hidpi",data_bg_multi:"bg-multi",data_bg_multi_hidpi:"bg-multi-hidpi",data_poster:"poster",class_applied:"applied",class_loading:"loading",class_loaded:"loaded",class_error:"error",unobserve_completed:!0,unobserve_entered:!1,cancel_on_exit:!1,callback_enter:null,callback_exit:null,callback_applied:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,callback_cancel:null,use_native:!1},c=function(t){return n({},o,t)},l=function(n,t){var e,i=new n(t);try{e=new CustomEvent("LazyLoad::Initialized",{detail:{instance:i}})}catch(n){(e=document.createEvent("CustomEvent")).initCustomEvent("LazyLoad::Initialized",!1,!1,{instance:i})}window.dispatchEvent(e)},s=function(n,t){return n.getAttribute("data-"+t)},u=function(n,t,e){var i="data-"+t;null!==e?n.setAttribute(i,e):n.removeAttribute(i)},d=function(n){return s(n,"ll-status")},f=function(n,t){return u(n,"ll-status",t)},_=function(n){return f(n,null)},g=function(n){return null===d(n)},v=function(n){return"native"===d(n)},b=function(n,t,e,i){n&&(void 0===i?void 0===e?n(t):n(t,e):n(t,e,i))},p=function(n,t){a?n.classList.add(t):n.className+=(n.className?" ":"")+t},h=function(n,t){a?n.classList.remove(t):n.className=n.className.replace(new RegExp("(^|\\s+)"+t+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},m=function(n){return n.llTempImage},E=function(n,t){if(t){var e=t._observer;e&&e.unobserve(n)}},I=function(n,t){n&&(n.loadingCount+=t)},A=function(n,t){n&&(n.toLoadCount=t)},L=function(n){for(var t,e=[],i=0;t=n.children[i];i+=1)"SOURCE"===t.tagName&&e.push(t);return e},w=function(n,t,e){e&&n.setAttribute(t,e)},k=function(n,t){n.removeAttribute(t)},y=function(n){return!!n.llOriginalAttrs},z=function(n){if(!y(n)){var t={};t.src=n.getAttribute("src"),t.srcset=n.getAttribute("srcset"),t.sizes=n.getAttribute("sizes"),n.llOriginalAttrs=t}},O=function(n){if(y(n)){var t=n.llOriginalAttrs;w(n,"src",t.src),w(n,"srcset",t.srcset),w(n,"sizes",t.sizes)}},C=function(n,t){w(n,"sizes",s(n,t.data_sizes)),w(n,"srcset",s(n,t.data_srcset)),w(n,"src",s(n,t.data_src))},M=function(n){k(n,"src"),k(n,"srcset"),k(n,"sizes")},N=function(n,t){var e=n.parentNode;e&&"PICTURE"===e.tagName&&L(e).forEach(t)},x=function(n,t){L(n).forEach(t)},R={IMG:function(n,t){N(n,(function(n){z(n),C(n,t)})),z(n),C(n,t)},IFRAME:function(n,t){w(n,"src",s(n,t.data_src))},VIDEO:function(n,t){x(n,(function(n){w(n,"src",s(n,t.data_src))})),w(n,"poster",s(n,t.data_poster)),w(n,"src",s(n,t.data_src)),n.load()}},G=function(n,t){var e=R[n.tagName];e&&e(n,t)},T=function(n,t,e){I(e,1),p(n,t.class_loading),f(n,"loading"),b(t.callback_loading,n,e)},D={IMG:function(n,t){u(n,t.data_src,null),u(n,t.data_srcset,null),u(n,t.data_sizes,null),N(n,(function(n){u(n,t.data_srcset,null),u(n,t.data_sizes,null)}))},IFRAME:function(n,t){u(n,t.data_src,null)},VIDEO:function(n,t){u(n,t.data_src,null),u(n,t.data_poster,null),x(n,(function(n){u(n,t.data_src,null)}))}},F=function(n,t){u(n,t.data_bg_multi,null),u(n,t.data_bg_multi_hidpi,null)},V=function(n,t){var e=D[n.tagName];e?e(n,t):function(n,t){u(n,t.data_bg,null),u(n,t.data_bg_hidpi,null)}(n,t)},P=["IMG","IFRAME","VIDEO"],S=function(n,t){!t||function(n){return n.loadingCount>0}(t)||function(n){return n.toLoadCount>0}(t)||b(n.callback_finish,t)},j=function(n,t,e){n.addEventListener(t,e),n.llEvLisnrs[t]=e},U=function(n,t,e){n.removeEventListener(t,e)},$=function(n){return!!n.llEvLisnrs},q=function(n){if($(n)){var t=n.llEvLisnrs;for(var e in t){var i=t[e];U(n,e,i)}delete n.llEvLisnrs}},H=function(n,t,e){!function(n){delete n.llTempImage}(n),I(e,-1),function(n){n&&(n.toLoadCount-=1)}(e),h(n,t.class_loading),t.unobserve_completed&&E(n,e)},B=function(n,t,e){var i=m(n)||n;$(i)||function(n,t,e){$(n)||(n.llEvLisnrs={});var i="VIDEO"===n.tagName?"loadeddata":"load";j(n,i,t),j(n,"error",e)}(i,(function(a){!function(n,t,e,i){var a=v(t);H(t,e,i),p(t,e.class_loaded),f(t,"loaded"),V(t,e),b(e.callback_loaded,t,i),a||S(e,i)}(0,n,t,e),q(i)}),(function(a){!function(n,t,e,i){var a=v(t);H(t,e,i),p(t,e.class_error),f(t,"error"),b(e.callback_error,t,i),a||S(e,i)}(0,n,t,e),q(i)}))},J=function(n,t,e){!function(n){n.llTempImage=document.createElement("IMG")}(n),B(n,t,e),function(n,t,e){var i=s(n,t.data_bg),a=s(n,t.data_bg_hidpi),o=r&&a?a:i;o&&(n.style.backgroundImage='url("'.concat(o,'")'),m(n).setAttribute("src",o),T(n,t,e))}(n,t,e),function(n,t,e){var i=s(n,t.data_bg_multi),a=s(n,t.data_bg_multi_hidpi),o=r&&a?a:i;o&&(n.style.backgroundImage=o,function(n,t,e){p(n,t.class_applied),f(n,"applied"),F(n,t),t.unobserve_completed&&E(n,t),b(t.callback_applied,n,e)}(n,t,e))}(n,t,e)},K=function(n,t,e){!function(n){return P.indexOf(n.tagName)>-1}(n)?J(n,t,e):function(n,t,e){B(n,t,e),G(n,t),T(n,t,e)}(n,t,e)},Q=["IMG","IFRAME"],W=function(n){return n.use_native&&"loading"in HTMLImageElement.prototype},X=function(n,t,e){n.forEach((function(n){return function(n){return n.isIntersecting||n.intersectionRatio>0}(n)?function(n,t,e,i){b(e.callback_enter,n,t,i),function(n,t,e){t.unobserve_entered&&E(n,e)}(n,e,i),function(n){return!g(n)}(n)||K(n,e,i)}(n.target,n,t,e):function(n,t,e,i){g(n)||(function(n,t,e,i){e.cancel_on_exit&&function(n){return"loading"===d(n)}(n)&&"IMG"===n.tagName&&(q(n),function(n){N(n,(function(n){M(n)})),M(n)}(n),function(n){N(n,(function(n){O(n)})),O(n)}(n),h(n,e.class_loading),I(i,-1),_(n),b(e.callback_cancel,n,t,i))}(n,t,e,i),b(e.callback_exit,n,t,i))}(n.target,n,t,e)}))},Y=function(n){return Array.prototype.slice.call(n)},Z=function(n){return n.container.querySelectorAll(n.elements_selector)},nn=function(n){return function(n){return"error"===d(n)}(n)},tn=function(n,t){return function(n){return Y(n).filter(g)}(n||Z(t))},en=function(n,e){var a=c(n);this._settings=a,this.loadingCount=0,function(n,t){i&&!W(n)&&(t._observer=new IntersectionObserver((function(e){X(e,n,t)}),function(n){return{root:n.container===document?null:n.container,rootMargin:n.thresholds||n.threshold+"px"}}(n)))}(a,this),function(n,e){t&&window.addEventListener("online",(function(){!function(n,t){var e;(e=Z(n),Y(e).filter(nn)).forEach((function(t){h(t,n.class_error),_(t)})),t.update()}(n,e)}))}(a,this),this.update(e)};return en.prototype={update:function(n){var t,a,r=this._settings,o=tn(n,r);A(this,o.length),!e&&i?W(r)?function(n,t,e){n.forEach((function(n){-1!==Q.indexOf(n.tagName)&&(n.setAttribute("loading","lazy"),function(n,t,e){B(n,t,e),G(n,t),V(n,t),f(n,"native")}(n,t,e))})),A(e,0)}(o,r,this):(a=o,function(n){n.disconnect()}(t=this._observer),function(n,t){t.forEach((function(t){n.observe(t)}))}(t,a)):this.loadAll(o)},destroy:function(){this._observer&&this._observer.disconnect(),Z(this._settings).forEach((function(n){delete n.llOriginalAttrs})),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(n){var t=this,e=this._settings;tn(n,e).forEach((function(n){K(n,e,t)}))}},en.load=function(n,t){var e=c(t);K(n,e)},en.resetStatus=function(n){_(n)},t&&function(n,t){if(t)if(t.length)for(var e,i=0;e=t[i];i+=1)l(n,e);else l(n,t)}(en,window.lazyLoadOptions),en})); | ||
| define((function(){"use strict";function n(){return(n=Object.assign||function(n){for(var t=1;t<arguments.length;t++){var e=arguments[t];for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&(n[i]=e[i])}return n}).apply(this,arguments)}var t="undefined"!=typeof window,e=t&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),i=t&&"IntersectionObserver"in window,a=t&&"classList"in document.createElement("p"),r=t&&window.devicePixelRatio>1,o={elements_selector:".lazy",container:e||t?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",data_bg_hidpi:"bg-hidpi",data_bg_multi:"bg-multi",data_bg_multi_hidpi:"bg-multi-hidpi",data_poster:"poster",class_applied:"applied",class_loading:"loading",class_loaded:"loaded",class_error:"error",unobserve_completed:!0,unobserve_entered:!1,cancel_on_exit:!0,callback_enter:null,callback_exit:null,callback_applied:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,callback_cancel:null,use_native:!1},c=function(t){return n({},o,t)},l=function(n,t){var e,i=new n(t);try{e=new CustomEvent("LazyLoad::Initialized",{detail:{instance:i}})}catch(n){(e=document.createEvent("CustomEvent")).initCustomEvent("LazyLoad::Initialized",!1,!1,{instance:i})}window.dispatchEvent(e)},s=function(n,t){return n.getAttribute("data-"+t)},u=function(n,t,e){var i="data-"+t;null!==e?n.setAttribute(i,e):n.removeAttribute(i)},d=function(n){return s(n,"ll-status")},f=function(n,t){return u(n,"ll-status",t)},_=function(n){return f(n,null)},g=function(n){return null===d(n)},v=function(n){return"native"===d(n)},b=function(n,t,e,i){n&&(void 0===i?void 0===e?n(t):n(t,e):n(t,e,i))},p=function(n,t){a?n.classList.add(t):n.className+=(n.className?" ":"")+t},h=function(n,t){a?n.classList.remove(t):n.className=n.className.replace(new RegExp("(^|\\s+)"+t+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},m=function(n){return n.llTempImage},E=function(n,t){if(t){var e=t._observer;e&&e.unobserve(n)}},I=function(n,t){n&&(n.loadingCount+=t)},A=function(n,t){n&&(n.toLoadCount=t)},L=function(n){for(var t,e=[],i=0;t=n.children[i];i+=1)"SOURCE"===t.tagName&&e.push(t);return e},w=function(n,t,e){e&&n.setAttribute(t,e)},y=function(n,t){n.removeAttribute(t)},k=function(n){return!!n.llOriginalAttrs},z=function(n){if(!k(n)){var t={};t.src=n.getAttribute("src"),t.srcset=n.getAttribute("srcset"),t.sizes=n.getAttribute("sizes"),n.llOriginalAttrs=t}},O=function(n){if(k(n)){var t=n.llOriginalAttrs;w(n,"src",t.src),w(n,"srcset",t.srcset),w(n,"sizes",t.sizes)}},C=function(n,t){w(n,"sizes",s(n,t.data_sizes)),w(n,"srcset",s(n,t.data_srcset)),w(n,"src",s(n,t.data_src))},N=function(n){y(n,"src"),y(n,"srcset"),y(n,"sizes")},M=function(n,t){var e=n.parentNode;e&&"PICTURE"===e.tagName&&L(e).forEach(t)},x=function(n,t){L(n).forEach(t)},R={IMG:function(n,t){M(n,(function(n){z(n),C(n,t)})),z(n),C(n,t)},IFRAME:function(n,t){w(n,"src",s(n,t.data_src))},VIDEO:function(n,t){x(n,(function(n){w(n,"src",s(n,t.data_src))})),w(n,"poster",s(n,t.data_poster)),w(n,"src",s(n,t.data_src)),n.load()}},G=function(n,t){var e=R[n.tagName];e&&e(n,t)},T=function(n,t,e){I(e,1),p(n,t.class_loading),f(n,"loading"),b(t.callback_loading,n,e)},D={IMG:function(n,t){u(n,t.data_src,null),u(n,t.data_srcset,null),u(n,t.data_sizes,null),M(n,(function(n){u(n,t.data_srcset,null),u(n,t.data_sizes,null)}))},IFRAME:function(n,t){u(n,t.data_src,null)},VIDEO:function(n,t){u(n,t.data_src,null),u(n,t.data_poster,null),x(n,(function(n){u(n,t.data_src,null)}))}},F=function(n,t){u(n,t.data_bg_multi,null),u(n,t.data_bg_multi_hidpi,null)},V=function(n,t){var e=D[n.tagName];e?e(n,t):function(n,t){u(n,t.data_bg,null),u(n,t.data_bg_hidpi,null)}(n,t)},P=["IMG","IFRAME","VIDEO"],S=function(n,t){!t||function(n){return n.loadingCount>0}(t)||function(n){return n.toLoadCount>0}(t)||b(n.callback_finish,t)},j=function(n,t,e){n.addEventListener(t,e),n.llEvLisnrs[t]=e},U=function(n,t,e){n.removeEventListener(t,e)},$=function(n){return!!n.llEvLisnrs},q=function(n){if($(n)){var t=n.llEvLisnrs;for(var e in t){var i=t[e];U(n,e,i)}delete n.llEvLisnrs}},H=function(n,t,e){!function(n){delete n.llTempImage}(n),I(e,-1),function(n){n&&(n.toLoadCount-=1)}(e),h(n,t.class_loading),t.unobserve_completed&&E(n,e)},B=function(n,t,e){var i=m(n)||n;$(i)||function(n,t,e){$(n)||(n.llEvLisnrs={});var i="VIDEO"===n.tagName?"loadeddata":"load";j(n,i,t),j(n,"error",e)}(i,(function(a){!function(n,t,e,i){var a=v(t);H(t,e,i),p(t,e.class_loaded),f(t,"loaded"),V(t,e),b(e.callback_loaded,t,i),a||S(e,i)}(0,n,t,e),q(i)}),(function(a){!function(n,t,e,i){var a=v(t);H(t,e,i),p(t,e.class_error),f(t,"error"),b(e.callback_error,t,i),a||S(e,i)}(0,n,t,e),q(i)}))},J=function(n,t,e){!function(n){n.llTempImage=document.createElement("IMG")}(n),B(n,t,e),function(n,t,e){var i=s(n,t.data_bg),a=s(n,t.data_bg_hidpi),o=r&&a?a:i;o&&(n.style.backgroundImage='url("'.concat(o,'")'),m(n).setAttribute("src",o),T(n,t,e))}(n,t,e),function(n,t,e){var i=s(n,t.data_bg_multi),a=s(n,t.data_bg_multi_hidpi),o=r&&a?a:i;o&&(n.style.backgroundImage=o,function(n,t,e){p(n,t.class_applied),f(n,"applied"),F(n,t),t.unobserve_completed&&E(n,t),b(t.callback_applied,n,e)}(n,t,e))}(n,t,e)},K=function(n,t,e){!function(n){return P.indexOf(n.tagName)>-1}(n)?J(n,t,e):function(n,t,e){B(n,t,e),G(n,t),T(n,t,e)}(n,t,e)},Q=["IMG","IFRAME"],W=function(n){return n.use_native&&"loading"in HTMLImageElement.prototype},X=function(n,t,e){n.forEach((function(n){return function(n){return n.isIntersecting||n.intersectionRatio>0}(n)?function(n,t,e,i){b(e.callback_enter,n,t,i),function(n,t,e){t.unobserve_entered&&E(n,e)}(n,e,i),function(n){return!g(n)}(n)||K(n,e,i)}(n.target,n,t,e):function(n,t,e,i){g(n)||(function(n,t,e,i){e.cancel_on_exit&&function(n){return"loading"===d(n)}(n)&&"IMG"===n.tagName&&(q(n),function(n){M(n,(function(n){N(n)})),N(n)}(n),function(n){M(n,(function(n){O(n)})),O(n)}(n),h(n,e.class_loading),I(i,-1),_(n),b(e.callback_cancel,n,t,i))}(n,t,e,i),b(e.callback_exit,n,t,i))}(n.target,n,t,e)}))},Y=function(n){return Array.prototype.slice.call(n)},Z=function(n){return n.container.querySelectorAll(n.elements_selector)},nn=function(n){return function(n){return"error"===d(n)}(n)},tn=function(n,t){return function(n){return Y(n).filter(g)}(n||Z(t))},en=function(n,e){var a=c(n);this._settings=a,this.loadingCount=0,function(n,t){i&&!W(n)&&(t._observer=new IntersectionObserver((function(e){X(e,n,t)}),function(n){return{root:n.container===document?null:n.container,rootMargin:n.thresholds||n.threshold+"px"}}(n)))}(a,this),function(n,e){t&&window.addEventListener("online",(function(){!function(n,t){var e;(e=Z(n),Y(e).filter(nn)).forEach((function(t){h(t,n.class_error),_(t)})),t.update()}(n,e)}))}(a,this),this.update(e)};return en.prototype={update:function(n){var t,a,r=this._settings,o=tn(n,r);A(this,o.length),!e&&i?W(r)?function(n,t,e){n.forEach((function(n){-1!==Q.indexOf(n.tagName)&&(n.setAttribute("loading","lazy"),function(n,t,e){B(n,t,e),G(n,t),V(n,t),f(n,"native")}(n,t,e))})),A(e,0)}(o,r,this):(a=o,function(n){n.disconnect()}(t=this._observer),function(n,t){t.forEach((function(t){n.observe(t)}))}(t,a)):this.loadAll(o)},destroy:function(){this._observer&&this._observer.disconnect(),Z(this._settings).forEach((function(n){delete n.llOriginalAttrs})),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(n){var t=this,e=this._settings;tn(n,e).forEach((function(n){K(n,e,t)}))}},en.load=function(n,t){var e=c(t);K(n,e)},en.resetStatus=function(n){_(n)},t&&function(n,t){if(t)if(t.length)for(var e,i=0;e=t[i];i+=1)l(n,e);else l(n,t)}(en,window.lazyLoadOptions),en})); |
@@ -14,3 +14,3 @@ const runningOnBrowser = typeof window !== "undefined"; | ||
| const defaultSettings = { | ||
| elements_selector: "IMG", | ||
| elements_selector: ".lazy", | ||
| container: isBot || runningOnBrowser ? document : null, | ||
@@ -33,3 +33,3 @@ threshold: 300, | ||
| unobserve_entered: false, | ||
| cancel_on_exit: false, | ||
| cancel_on_exit: true, | ||
| callback_enter: null, | ||
@@ -36,0 +36,0 @@ callback_exit: null, |
@@ -1,1 +0,1 @@ | ||
| const t="undefined"!=typeof window,e=t&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),a=t&&"IntersectionObserver"in window,s=t&&"classList"in document.createElement("p"),l=t&&window.devicePixelRatio>1,n={elements_selector:"IMG",container:e||t?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",data_bg_hidpi:"bg-hidpi",data_bg_multi:"bg-multi",data_bg_multi_hidpi:"bg-multi-hidpi",data_poster:"poster",class_applied:"applied",class_loading:"loading",class_loaded:"loaded",class_error:"error",unobserve_completed:!0,unobserve_entered:!1,cancel_on_exit:!1,callback_enter:null,callback_exit:null,callback_applied:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,callback_cancel:null,use_native:!1},r=t=>Object.assign({},n,t),i=function(t,e){var a;let s=new t(e);try{a=new CustomEvent("LazyLoad::Initialized",{detail:{instance:s}})}catch(t){(a=document.createEvent("CustomEvent")).initCustomEvent("LazyLoad::Initialized",!1,!1,{instance:s})}window.dispatchEvent(a)},o=(t,e)=>t.getAttribute("data-"+e),c=(t,e,a)=>{var s="data-"+e;null!==a?t.setAttribute(s,a):t.removeAttribute(s)},d=t=>o(t,"ll-status"),_=(t,e)=>c(t,"ll-status",e),u=t=>_(t,null),g=t=>null===d(t),b=t=>"native"===d(t),p=(t,e,a,s)=>{t&&(void 0===s?void 0===a?t(e):t(e,a):t(e,a,s))},h=(t,e)=>{s?t.classList.add(e):t.className+=(t.className?" ":"")+e},m=(t,e)=>{s?t.classList.remove(e):t.className=t.className.replace(new RegExp("(^|\\s+)"+e+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},v=t=>t.llTempImage,E=(t,e)=>{if(!e)return;const a=e._observer;a&&a.unobserve(t)},f=(t,e)=>{t&&(t.loadingCount+=e)},I=(t,e)=>{t&&(t.toLoadCount=e)},A=t=>{let e=[];for(let a,s=0;a=t.children[s];s+=1)"SOURCE"===a.tagName&&e.push(a);return e},L=(t,e,a)=>{a&&t.setAttribute(e,a)},w=(t,e)=>{t.removeAttribute(e)},k=t=>!!t.llOriginalAttrs,z=t=>{if(k(t))return;const e={};e.src=t.getAttribute("src"),e.srcset=t.getAttribute("srcset"),e.sizes=t.getAttribute("sizes"),t.llOriginalAttrs=e},y=t=>{if(!k(t))return;const e=t.llOriginalAttrs;L(t,"src",e.src),L(t,"srcset",e.srcset),L(t,"sizes",e.sizes)},O=(t,e)=>{L(t,"sizes",o(t,e.data_sizes)),L(t,"srcset",o(t,e.data_srcset)),L(t,"src",o(t,e.data_src))},C=t=>{w(t,"src"),w(t,"srcset"),w(t,"sizes")},M=(t,e)=>{const a=t.parentNode;a&&"PICTURE"===a.tagName&&A(a).forEach(e)},N=(t,e)=>{A(t).forEach(e)},x={IMG:(t,e)=>{M(t,t=>{z(t),O(t,e)}),z(t),O(t,e)},IFRAME:(t,e)=>{L(t,"src",o(t,e.data_src))},VIDEO:(t,e)=>{N(t,t=>{L(t,"src",o(t,e.data_src))}),L(t,"poster",o(t,e.data_poster)),L(t,"src",o(t,e.data_src)),t.load()}},R=(t,e)=>{const a=x[t.tagName];a&&a(t,e)},G=(t,e,a)=>{f(a,1),h(t,e.class_loading),_(t,"loading"),p(e.callback_loading,t,a)},T={IMG:(t,e)=>{c(t,e.data_src,null),c(t,e.data_srcset,null),c(t,e.data_sizes,null),M(t,t=>{c(t,e.data_srcset,null),c(t,e.data_sizes,null)})},IFRAME:(t,e)=>{c(t,e.data_src,null)},VIDEO:(t,e)=>{c(t,e.data_src,null),c(t,e.data_poster,null),N(t,t=>{c(t,e.data_src,null)})}},D=(t,e)=>{c(t,e.data_bg_multi,null),c(t,e.data_bg_multi_hidpi,null)},F=(t,e)=>{const a=T[t.tagName];a?a(t,e):((t,e)=>{c(t,e.data_bg,null),c(t,e.data_bg_hidpi,null)})(t,e)},V=["IMG","IFRAME","VIDEO"],S=(t,e)=>{!e||(t=>t.loadingCount>0)(e)||(t=>t.toLoadCount>0)(e)||p(t.callback_finish,e)},$=(t,e,a)=>{t.addEventListener(e,a),t.llEvLisnrs[e]=a},P=(t,e,a)=>{t.removeEventListener(e,a)},U=t=>!!t.llEvLisnrs,j=t=>{if(!U(t))return;const e=t.llEvLisnrs;for(let a in e){const s=e[a];P(t,a,s)}delete t.llEvLisnrs},q=(t,e,a)=>{(t=>{delete t.llTempImage})(t),f(a,-1),(t=>{t&&(t.toLoadCount-=1)})(a),m(t,e.class_loading),e.unobserve_completed&&E(t,a)},H=(t,e,a)=>{const s=v(t)||t;U(s)||((t,e,a)=>{U(t)||(t.llEvLisnrs={});const s="VIDEO"===t.tagName?"loadeddata":"load";$(t,s,e),$(t,"error",a)})(s,l=>{((t,e,a,s)=>{const l=b(e);q(e,a,s),h(e,a.class_loaded),_(e,"loaded"),F(e,a),p(a.callback_loaded,e,s),l||S(a,s)})(0,t,e,a),j(s)},l=>{((t,e,a,s)=>{const l=b(e);q(e,a,s),h(e,a.class_error),_(e,"error"),p(a.callback_error,e,s),l||S(a,s)})(0,t,e,a),j(s)})},B=(t,e,a)=>{(t=>{t.llTempImage=document.createElement("IMG")})(t),H(t,e,a),((t,e,a)=>{const s=o(t,e.data_bg),n=o(t,e.data_bg_hidpi),r=l&&n?n:s;r&&(t.style.backgroundImage=`url("${r}")`,v(t).setAttribute("src",r),G(t,e,a))})(t,e,a),((t,e,a)=>{const s=o(t,e.data_bg_multi),n=o(t,e.data_bg_multi_hidpi),r=l&&n?n:s;r&&(t.style.backgroundImage=r,((t,e,a)=>{h(t,e.class_applied),_(t,"applied"),D(t,e),e.unobserve_completed&&E(t,e),p(e.callback_applied,t,a)})(t,e,a))})(t,e,a)},J=(t,e,a)=>{(t=>V.indexOf(t.tagName)>-1)(t)?((t,e,a)=>{H(t,e,a),R(t,e),G(t,e,a)})(t,e,a):B(t,e,a)},K=["IMG","IFRAME"],Q=t=>t.use_native&&"loading"in HTMLImageElement.prototype,W=(t,e,a)=>{t.forEach(t=>(t=>t.isIntersecting||t.intersectionRatio>0)(t)?((t,e,a,s)=>{p(a.callback_enter,t,e,s),((t,e,a)=>{e.unobserve_entered&&E(t,a)})(t,a,s),(t=>!g(t))(t)||J(t,a,s)})(t.target,t,e,a):((t,e,a,s)=>{g(t)||(((t,e,a,s)=>{a.cancel_on_exit&&(t=>"loading"===d(t))(t)&&"IMG"===t.tagName&&(j(t),(t=>{M(t,t=>{C(t)}),C(t)})(t),(t=>{M(t,t=>{y(t)}),y(t)})(t),m(t,a.class_loading),f(s,-1),u(t),p(a.callback_cancel,t,e,s))})(t,e,a,s),p(a.callback_exit,t,e,s))})(t.target,t,e,a))},X=t=>Array.prototype.slice.call(t),Y=t=>t.container.querySelectorAll(t.elements_selector),Z=t=>(t=>"error"===d(t))(t),tt=(t,e)=>(t=>X(t).filter(g))(t||Y(e)),et=function(e,s){const l=r(e);this._settings=l,this.loadingCount=0,((t,e)=>{a&&!Q(t)&&(e._observer=new IntersectionObserver(a=>{W(a,t,e)},(t=>({root:t.container===document?null:t.container,rootMargin:t.thresholds||t.threshold+"px"}))(t)))})(l,this),((e,a)=>{t&&window.addEventListener("online",()=>{((t,e)=>{var a;(a=Y(t),X(a).filter(Z)).forEach(e=>{m(e,t.class_error),u(e)}),e.update()})(e,a)})})(l,this),this.update(s)};et.prototype={update:function(t){const s=this._settings,l=tt(t,s);var n,r;I(this,l.length),!e&&a?Q(s)?((t,e,a)=>{t.forEach(t=>{-1!==K.indexOf(t.tagName)&&(t.setAttribute("loading","lazy"),((t,e,a)=>{H(t,e,a),R(t,e),F(t,e),_(t,"native")})(t,e,a))}),I(a,0)})(l,s,this):(r=l,(t=>{t.disconnect()})(n=this._observer),((t,e)=>{e.forEach(e=>{t.observe(e)})})(n,r)):this.loadAll(l)},destroy:function(){this._observer&&this._observer.disconnect(),Y(this._settings).forEach(t=>{delete t.llOriginalAttrs}),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(t){const e=this._settings;tt(t,e).forEach(t=>{J(t,e,this)})}},et.load=(t,e)=>{const a=r(e);J(t,a)},et.resetStatus=t=>{u(t)},t&&((t,e)=>{if(e)if(e.length)for(let a,s=0;a=e[s];s+=1)i(t,a);else i(t,e)})(et,window.lazyLoadOptions);export default et; | ||
| const t="undefined"!=typeof window,e=t&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),a=t&&"IntersectionObserver"in window,l=t&&"classList"in document.createElement("p"),s=t&&window.devicePixelRatio>1,n={elements_selector:".lazy",container:e||t?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",data_bg_hidpi:"bg-hidpi",data_bg_multi:"bg-multi",data_bg_multi_hidpi:"bg-multi-hidpi",data_poster:"poster",class_applied:"applied",class_loading:"loading",class_loaded:"loaded",class_error:"error",unobserve_completed:!0,unobserve_entered:!1,cancel_on_exit:!0,callback_enter:null,callback_exit:null,callback_applied:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,callback_cancel:null,use_native:!1},r=t=>Object.assign({},n,t),i=function(t,e){var a;let l=new t(e);try{a=new CustomEvent("LazyLoad::Initialized",{detail:{instance:l}})}catch(t){(a=document.createEvent("CustomEvent")).initCustomEvent("LazyLoad::Initialized",!1,!1,{instance:l})}window.dispatchEvent(a)},o=(t,e)=>t.getAttribute("data-"+e),c=(t,e,a)=>{var l="data-"+e;null!==a?t.setAttribute(l,a):t.removeAttribute(l)},d=t=>o(t,"ll-status"),_=(t,e)=>c(t,"ll-status",e),u=t=>_(t,null),g=t=>null===d(t),b=t=>"native"===d(t),p=(t,e,a,l)=>{t&&(void 0===l?void 0===a?t(e):t(e,a):t(e,a,l))},h=(t,e)=>{l?t.classList.add(e):t.className+=(t.className?" ":"")+e},m=(t,e)=>{l?t.classList.remove(e):t.className=t.className.replace(new RegExp("(^|\\s+)"+e+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},v=t=>t.llTempImage,E=(t,e)=>{if(!e)return;const a=e._observer;a&&a.unobserve(t)},f=(t,e)=>{t&&(t.loadingCount+=e)},I=(t,e)=>{t&&(t.toLoadCount=e)},A=t=>{let e=[];for(let a,l=0;a=t.children[l];l+=1)"SOURCE"===a.tagName&&e.push(a);return e},L=(t,e,a)=>{a&&t.setAttribute(e,a)},w=(t,e)=>{t.removeAttribute(e)},k=t=>!!t.llOriginalAttrs,z=t=>{if(k(t))return;const e={};e.src=t.getAttribute("src"),e.srcset=t.getAttribute("srcset"),e.sizes=t.getAttribute("sizes"),t.llOriginalAttrs=e},y=t=>{if(!k(t))return;const e=t.llOriginalAttrs;L(t,"src",e.src),L(t,"srcset",e.srcset),L(t,"sizes",e.sizes)},O=(t,e)=>{L(t,"sizes",o(t,e.data_sizes)),L(t,"srcset",o(t,e.data_srcset)),L(t,"src",o(t,e.data_src))},C=t=>{w(t,"src"),w(t,"srcset"),w(t,"sizes")},N=(t,e)=>{const a=t.parentNode;a&&"PICTURE"===a.tagName&&A(a).forEach(e)},M=(t,e)=>{A(t).forEach(e)},x={IMG:(t,e)=>{N(t,t=>{z(t),O(t,e)}),z(t),O(t,e)},IFRAME:(t,e)=>{L(t,"src",o(t,e.data_src))},VIDEO:(t,e)=>{M(t,t=>{L(t,"src",o(t,e.data_src))}),L(t,"poster",o(t,e.data_poster)),L(t,"src",o(t,e.data_src)),t.load()}},R=(t,e)=>{const a=x[t.tagName];a&&a(t,e)},G=(t,e,a)=>{f(a,1),h(t,e.class_loading),_(t,"loading"),p(e.callback_loading,t,a)},T={IMG:(t,e)=>{c(t,e.data_src,null),c(t,e.data_srcset,null),c(t,e.data_sizes,null),N(t,t=>{c(t,e.data_srcset,null),c(t,e.data_sizes,null)})},IFRAME:(t,e)=>{c(t,e.data_src,null)},VIDEO:(t,e)=>{c(t,e.data_src,null),c(t,e.data_poster,null),M(t,t=>{c(t,e.data_src,null)})}},D=(t,e)=>{c(t,e.data_bg_multi,null),c(t,e.data_bg_multi_hidpi,null)},F=(t,e)=>{const a=T[t.tagName];a?a(t,e):((t,e)=>{c(t,e.data_bg,null),c(t,e.data_bg_hidpi,null)})(t,e)},V=["IMG","IFRAME","VIDEO"],S=(t,e)=>{!e||(t=>t.loadingCount>0)(e)||(t=>t.toLoadCount>0)(e)||p(t.callback_finish,e)},$=(t,e,a)=>{t.addEventListener(e,a),t.llEvLisnrs[e]=a},P=(t,e,a)=>{t.removeEventListener(e,a)},U=t=>!!t.llEvLisnrs,j=t=>{if(!U(t))return;const e=t.llEvLisnrs;for(let a in e){const l=e[a];P(t,a,l)}delete t.llEvLisnrs},q=(t,e,a)=>{(t=>{delete t.llTempImage})(t),f(a,-1),(t=>{t&&(t.toLoadCount-=1)})(a),m(t,e.class_loading),e.unobserve_completed&&E(t,a)},H=(t,e,a)=>{const l=v(t)||t;U(l)||((t,e,a)=>{U(t)||(t.llEvLisnrs={});const l="VIDEO"===t.tagName?"loadeddata":"load";$(t,l,e),$(t,"error",a)})(l,s=>{((t,e,a,l)=>{const s=b(e);q(e,a,l),h(e,a.class_loaded),_(e,"loaded"),F(e,a),p(a.callback_loaded,e,l),s||S(a,l)})(0,t,e,a),j(l)},s=>{((t,e,a,l)=>{const s=b(e);q(e,a,l),h(e,a.class_error),_(e,"error"),p(a.callback_error,e,l),s||S(a,l)})(0,t,e,a),j(l)})},B=(t,e,a)=>{(t=>{t.llTempImage=document.createElement("IMG")})(t),H(t,e,a),((t,e,a)=>{const l=o(t,e.data_bg),n=o(t,e.data_bg_hidpi),r=s&&n?n:l;r&&(t.style.backgroundImage=`url("${r}")`,v(t).setAttribute("src",r),G(t,e,a))})(t,e,a),((t,e,a)=>{const l=o(t,e.data_bg_multi),n=o(t,e.data_bg_multi_hidpi),r=s&&n?n:l;r&&(t.style.backgroundImage=r,((t,e,a)=>{h(t,e.class_applied),_(t,"applied"),D(t,e),e.unobserve_completed&&E(t,e),p(e.callback_applied,t,a)})(t,e,a))})(t,e,a)},J=(t,e,a)=>{(t=>V.indexOf(t.tagName)>-1)(t)?((t,e,a)=>{H(t,e,a),R(t,e),G(t,e,a)})(t,e,a):B(t,e,a)},K=["IMG","IFRAME"],Q=t=>t.use_native&&"loading"in HTMLImageElement.prototype,W=(t,e,a)=>{t.forEach(t=>(t=>t.isIntersecting||t.intersectionRatio>0)(t)?((t,e,a,l)=>{p(a.callback_enter,t,e,l),((t,e,a)=>{e.unobserve_entered&&E(t,a)})(t,a,l),(t=>!g(t))(t)||J(t,a,l)})(t.target,t,e,a):((t,e,a,l)=>{g(t)||(((t,e,a,l)=>{a.cancel_on_exit&&(t=>"loading"===d(t))(t)&&"IMG"===t.tagName&&(j(t),(t=>{N(t,t=>{C(t)}),C(t)})(t),(t=>{N(t,t=>{y(t)}),y(t)})(t),m(t,a.class_loading),f(l,-1),u(t),p(a.callback_cancel,t,e,l))})(t,e,a,l),p(a.callback_exit,t,e,l))})(t.target,t,e,a))},X=t=>Array.prototype.slice.call(t),Y=t=>t.container.querySelectorAll(t.elements_selector),Z=t=>(t=>"error"===d(t))(t),tt=(t,e)=>(t=>X(t).filter(g))(t||Y(e)),et=function(e,l){const s=r(e);this._settings=s,this.loadingCount=0,((t,e)=>{a&&!Q(t)&&(e._observer=new IntersectionObserver(a=>{W(a,t,e)},(t=>({root:t.container===document?null:t.container,rootMargin:t.thresholds||t.threshold+"px"}))(t)))})(s,this),((e,a)=>{t&&window.addEventListener("online",()=>{((t,e)=>{var a;(a=Y(t),X(a).filter(Z)).forEach(e=>{m(e,t.class_error),u(e)}),e.update()})(e,a)})})(s,this),this.update(l)};et.prototype={update:function(t){const l=this._settings,s=tt(t,l);var n,r;I(this,s.length),!e&&a?Q(l)?((t,e,a)=>{t.forEach(t=>{-1!==K.indexOf(t.tagName)&&(t.setAttribute("loading","lazy"),((t,e,a)=>{H(t,e,a),R(t,e),F(t,e),_(t,"native")})(t,e,a))}),I(a,0)})(s,l,this):(r=s,(t=>{t.disconnect()})(n=this._observer),((t,e)=>{e.forEach(e=>{t.observe(e)})})(n,r)):this.loadAll(s)},destroy:function(){this._observer&&this._observer.disconnect(),Y(this._settings).forEach(t=>{delete t.llOriginalAttrs}),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(t){const e=this._settings;tt(t,e).forEach(t=>{J(t,e,this)})}},et.load=(t,e)=>{const a=r(e);J(t,a)},et.resetStatus=t=>{u(t)},t&&((t,e)=>{if(e)if(e.length)for(let a,l=0;a=e[l];l+=1)i(t,a);else i(t,e)})(et,window.lazyLoadOptions);export default et; |
@@ -29,3 +29,3 @@ var LazyLoad = (function () { | ||
| var defaultSettings = { | ||
| elements_selector: "IMG", | ||
| elements_selector: ".lazy", | ||
| container: isBot || runningOnBrowser ? document : null, | ||
@@ -48,3 +48,3 @@ threshold: 300, | ||
| unobserve_entered: false, | ||
| cancel_on_exit: false, | ||
| cancel_on_exit: true, | ||
| callback_enter: null, | ||
@@ -51,0 +51,0 @@ callback_exit: null, |
@@ -1,1 +0,1 @@ | ||
| var LazyLoad=function(){"use strict";function t(){return(t=Object.assign||function(t){for(var n=1;n<arguments.length;n++){var e=arguments[n];for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i])}return t}).apply(this,arguments)}var n="undefined"!=typeof window,e=n&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),i=n&&"IntersectionObserver"in window,a=n&&"classList"in document.createElement("p"),r=n&&window.devicePixelRatio>1,o={elements_selector:"IMG",container:e||n?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",data_bg_hidpi:"bg-hidpi",data_bg_multi:"bg-multi",data_bg_multi_hidpi:"bg-multi-hidpi",data_poster:"poster",class_applied:"applied",class_loading:"loading",class_loaded:"loaded",class_error:"error",unobserve_completed:!0,unobserve_entered:!1,cancel_on_exit:!1,callback_enter:null,callback_exit:null,callback_applied:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,callback_cancel:null,use_native:!1},c=function(n){return t({},o,n)},l=function(t,n){var e,i=new t(n);try{e=new CustomEvent("LazyLoad::Initialized",{detail:{instance:i}})}catch(t){(e=document.createEvent("CustomEvent")).initCustomEvent("LazyLoad::Initialized",!1,!1,{instance:i})}window.dispatchEvent(e)},s=function(t,n){return t.getAttribute("data-"+n)},u=function(t,n,e){var i="data-"+n;null!==e?t.setAttribute(i,e):t.removeAttribute(i)},d=function(t){return s(t,"ll-status")},f=function(t,n){return u(t,"ll-status",n)},_=function(t){return f(t,null)},g=function(t){return null===d(t)},v=function(t){return"native"===d(t)},b=function(t,n,e,i){t&&(void 0===i?void 0===e?t(n):t(n,e):t(n,e,i))},p=function(t,n){a?t.classList.add(n):t.className+=(t.className?" ":"")+n},h=function(t,n){a?t.classList.remove(n):t.className=t.className.replace(new RegExp("(^|\\s+)"+n+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},m=function(t){return t.llTempImage},E=function(t,n){if(n){var e=n._observer;e&&e.unobserve(t)}},I=function(t,n){t&&(t.loadingCount+=n)},A=function(t,n){t&&(t.toLoadCount=n)},L=function(t){for(var n,e=[],i=0;n=t.children[i];i+=1)"SOURCE"===n.tagName&&e.push(n);return e},w=function(t,n,e){e&&t.setAttribute(n,e)},y=function(t,n){t.removeAttribute(n)},k=function(t){return!!t.llOriginalAttrs},z=function(t){if(!k(t)){var n={};n.src=t.getAttribute("src"),n.srcset=t.getAttribute("srcset"),n.sizes=t.getAttribute("sizes"),t.llOriginalAttrs=n}},O=function(t){if(k(t)){var n=t.llOriginalAttrs;w(t,"src",n.src),w(t,"srcset",n.srcset),w(t,"sizes",n.sizes)}},C=function(t,n){w(t,"sizes",s(t,n.data_sizes)),w(t,"srcset",s(t,n.data_srcset)),w(t,"src",s(t,n.data_src))},M=function(t){y(t,"src"),y(t,"srcset"),y(t,"sizes")},N=function(t,n){var e=t.parentNode;e&&"PICTURE"===e.tagName&&L(e).forEach(n)},x=function(t,n){L(t).forEach(n)},R={IMG:function(t,n){N(t,(function(t){z(t),C(t,n)})),z(t),C(t,n)},IFRAME:function(t,n){w(t,"src",s(t,n.data_src))},VIDEO:function(t,n){x(t,(function(t){w(t,"src",s(t,n.data_src))})),w(t,"poster",s(t,n.data_poster)),w(t,"src",s(t,n.data_src)),t.load()}},G=function(t,n){var e=R[t.tagName];e&&e(t,n)},T=function(t,n,e){I(e,1),p(t,n.class_loading),f(t,"loading"),b(n.callback_loading,t,e)},D={IMG:function(t,n){u(t,n.data_src,null),u(t,n.data_srcset,null),u(t,n.data_sizes,null),N(t,(function(t){u(t,n.data_srcset,null),u(t,n.data_sizes,null)}))},IFRAME:function(t,n){u(t,n.data_src,null)},VIDEO:function(t,n){u(t,n.data_src,null),u(t,n.data_poster,null),x(t,(function(t){u(t,n.data_src,null)}))}},F=function(t,n){u(t,n.data_bg_multi,null),u(t,n.data_bg_multi_hidpi,null)},V=function(t,n){var e=D[t.tagName];e?e(t,n):function(t,n){u(t,n.data_bg,null),u(t,n.data_bg_hidpi,null)}(t,n)},P=["IMG","IFRAME","VIDEO"],S=function(t,n){!n||function(t){return t.loadingCount>0}(n)||function(t){return t.toLoadCount>0}(n)||b(t.callback_finish,n)},j=function(t,n,e){t.addEventListener(n,e),t.llEvLisnrs[n]=e},U=function(t,n,e){t.removeEventListener(n,e)},$=function(t){return!!t.llEvLisnrs},q=function(t){if($(t)){var n=t.llEvLisnrs;for(var e in n){var i=n[e];U(t,e,i)}delete t.llEvLisnrs}},H=function(t,n,e){!function(t){delete t.llTempImage}(t),I(e,-1),function(t){t&&(t.toLoadCount-=1)}(e),h(t,n.class_loading),n.unobserve_completed&&E(t,e)},B=function(t,n,e){var i=m(t)||t;$(i)||function(t,n,e){$(t)||(t.llEvLisnrs={});var i="VIDEO"===t.tagName?"loadeddata":"load";j(t,i,n),j(t,"error",e)}(i,(function(a){!function(t,n,e,i){var a=v(n);H(n,e,i),p(n,e.class_loaded),f(n,"loaded"),V(n,e),b(e.callback_loaded,n,i),a||S(e,i)}(0,t,n,e),q(i)}),(function(a){!function(t,n,e,i){var a=v(n);H(n,e,i),p(n,e.class_error),f(n,"error"),b(e.callback_error,n,i),a||S(e,i)}(0,t,n,e),q(i)}))},J=function(t,n,e){!function(t){t.llTempImage=document.createElement("IMG")}(t),B(t,n,e),function(t,n,e){var i=s(t,n.data_bg),a=s(t,n.data_bg_hidpi),o=r&&a?a:i;o&&(t.style.backgroundImage='url("'.concat(o,'")'),m(t).setAttribute("src",o),T(t,n,e))}(t,n,e),function(t,n,e){var i=s(t,n.data_bg_multi),a=s(t,n.data_bg_multi_hidpi),o=r&&a?a:i;o&&(t.style.backgroundImage=o,function(t,n,e){p(t,n.class_applied),f(t,"applied"),F(t,n),n.unobserve_completed&&E(t,n),b(n.callback_applied,t,e)}(t,n,e))}(t,n,e)},K=function(t,n,e){!function(t){return P.indexOf(t.tagName)>-1}(t)?J(t,n,e):function(t,n,e){B(t,n,e),G(t,n),T(t,n,e)}(t,n,e)},Q=["IMG","IFRAME"],W=function(t){return t.use_native&&"loading"in HTMLImageElement.prototype},X=function(t,n,e){t.forEach((function(t){return function(t){return t.isIntersecting||t.intersectionRatio>0}(t)?function(t,n,e,i){b(e.callback_enter,t,n,i),function(t,n,e){n.unobserve_entered&&E(t,e)}(t,e,i),function(t){return!g(t)}(t)||K(t,e,i)}(t.target,t,n,e):function(t,n,e,i){g(t)||(function(t,n,e,i){e.cancel_on_exit&&function(t){return"loading"===d(t)}(t)&&"IMG"===t.tagName&&(q(t),function(t){N(t,(function(t){M(t)})),M(t)}(t),function(t){N(t,(function(t){O(t)})),O(t)}(t),h(t,e.class_loading),I(i,-1),_(t),b(e.callback_cancel,t,n,i))}(t,n,e,i),b(e.callback_exit,t,n,i))}(t.target,t,n,e)}))},Y=function(t){return Array.prototype.slice.call(t)},Z=function(t){return t.container.querySelectorAll(t.elements_selector)},tt=function(t){return function(t){return"error"===d(t)}(t)},nt=function(t,n){return function(t){return Y(t).filter(g)}(t||Z(n))},et=function(t,e){var a=c(t);this._settings=a,this.loadingCount=0,function(t,n){i&&!W(t)&&(n._observer=new IntersectionObserver((function(e){X(e,t,n)}),function(t){return{root:t.container===document?null:t.container,rootMargin:t.thresholds||t.threshold+"px"}}(t)))}(a,this),function(t,e){n&&window.addEventListener("online",(function(){!function(t,n){var e;(e=Z(t),Y(e).filter(tt)).forEach((function(n){h(n,t.class_error),_(n)})),n.update()}(t,e)}))}(a,this),this.update(e)};return et.prototype={update:function(t){var n,a,r=this._settings,o=nt(t,r);A(this,o.length),!e&&i?W(r)?function(t,n,e){t.forEach((function(t){-1!==Q.indexOf(t.tagName)&&(t.setAttribute("loading","lazy"),function(t,n,e){B(t,n,e),G(t,n),V(t,n),f(t,"native")}(t,n,e))})),A(e,0)}(o,r,this):(a=o,function(t){t.disconnect()}(n=this._observer),function(t,n){n.forEach((function(n){t.observe(n)}))}(n,a)):this.loadAll(o)},destroy:function(){this._observer&&this._observer.disconnect(),Z(this._settings).forEach((function(t){delete t.llOriginalAttrs})),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(t){var n=this,e=this._settings;nt(t,e).forEach((function(t){K(t,e,n)}))}},et.load=function(t,n){var e=c(n);K(t,e)},et.resetStatus=function(t){_(t)},n&&function(t,n){if(n)if(n.length)for(var e,i=0;e=n[i];i+=1)l(t,e);else l(t,n)}(et,window.lazyLoadOptions),et}(); | ||
| var LazyLoad=function(){"use strict";function t(){return(t=Object.assign||function(t){for(var n=1;n<arguments.length;n++){var e=arguments[n];for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i])}return t}).apply(this,arguments)}var n="undefined"!=typeof window,e=n&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),i=n&&"IntersectionObserver"in window,a=n&&"classList"in document.createElement("p"),r=n&&window.devicePixelRatio>1,o={elements_selector:".lazy",container:e||n?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",data_bg_hidpi:"bg-hidpi",data_bg_multi:"bg-multi",data_bg_multi_hidpi:"bg-multi-hidpi",data_poster:"poster",class_applied:"applied",class_loading:"loading",class_loaded:"loaded",class_error:"error",unobserve_completed:!0,unobserve_entered:!1,cancel_on_exit:!0,callback_enter:null,callback_exit:null,callback_applied:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,callback_cancel:null,use_native:!1},c=function(n){return t({},o,n)},l=function(t,n){var e,i=new t(n);try{e=new CustomEvent("LazyLoad::Initialized",{detail:{instance:i}})}catch(t){(e=document.createEvent("CustomEvent")).initCustomEvent("LazyLoad::Initialized",!1,!1,{instance:i})}window.dispatchEvent(e)},s=function(t,n){return t.getAttribute("data-"+n)},u=function(t,n,e){var i="data-"+n;null!==e?t.setAttribute(i,e):t.removeAttribute(i)},d=function(t){return s(t,"ll-status")},f=function(t,n){return u(t,"ll-status",n)},_=function(t){return f(t,null)},g=function(t){return null===d(t)},v=function(t){return"native"===d(t)},b=function(t,n,e,i){t&&(void 0===i?void 0===e?t(n):t(n,e):t(n,e,i))},p=function(t,n){a?t.classList.add(n):t.className+=(t.className?" ":"")+n},h=function(t,n){a?t.classList.remove(n):t.className=t.className.replace(new RegExp("(^|\\s+)"+n+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},m=function(t){return t.llTempImage},E=function(t,n){if(n){var e=n._observer;e&&e.unobserve(t)}},I=function(t,n){t&&(t.loadingCount+=n)},A=function(t,n){t&&(t.toLoadCount=n)},L=function(t){for(var n,e=[],i=0;n=t.children[i];i+=1)"SOURCE"===n.tagName&&e.push(n);return e},w=function(t,n,e){e&&t.setAttribute(n,e)},y=function(t,n){t.removeAttribute(n)},z=function(t){return!!t.llOriginalAttrs},k=function(t){if(!z(t)){var n={};n.src=t.getAttribute("src"),n.srcset=t.getAttribute("srcset"),n.sizes=t.getAttribute("sizes"),t.llOriginalAttrs=n}},O=function(t){if(z(t)){var n=t.llOriginalAttrs;w(t,"src",n.src),w(t,"srcset",n.srcset),w(t,"sizes",n.sizes)}},C=function(t,n){w(t,"sizes",s(t,n.data_sizes)),w(t,"srcset",s(t,n.data_srcset)),w(t,"src",s(t,n.data_src))},N=function(t){y(t,"src"),y(t,"srcset"),y(t,"sizes")},M=function(t,n){var e=t.parentNode;e&&"PICTURE"===e.tagName&&L(e).forEach(n)},x=function(t,n){L(t).forEach(n)},R={IMG:function(t,n){M(t,(function(t){k(t),C(t,n)})),k(t),C(t,n)},IFRAME:function(t,n){w(t,"src",s(t,n.data_src))},VIDEO:function(t,n){x(t,(function(t){w(t,"src",s(t,n.data_src))})),w(t,"poster",s(t,n.data_poster)),w(t,"src",s(t,n.data_src)),t.load()}},G=function(t,n){var e=R[t.tagName];e&&e(t,n)},T=function(t,n,e){I(e,1),p(t,n.class_loading),f(t,"loading"),b(n.callback_loading,t,e)},D={IMG:function(t,n){u(t,n.data_src,null),u(t,n.data_srcset,null),u(t,n.data_sizes,null),M(t,(function(t){u(t,n.data_srcset,null),u(t,n.data_sizes,null)}))},IFRAME:function(t,n){u(t,n.data_src,null)},VIDEO:function(t,n){u(t,n.data_src,null),u(t,n.data_poster,null),x(t,(function(t){u(t,n.data_src,null)}))}},F=function(t,n){u(t,n.data_bg_multi,null),u(t,n.data_bg_multi_hidpi,null)},V=function(t,n){var e=D[t.tagName];e?e(t,n):function(t,n){u(t,n.data_bg,null),u(t,n.data_bg_hidpi,null)}(t,n)},P=["IMG","IFRAME","VIDEO"],S=function(t,n){!n||function(t){return t.loadingCount>0}(n)||function(t){return t.toLoadCount>0}(n)||b(t.callback_finish,n)},j=function(t,n,e){t.addEventListener(n,e),t.llEvLisnrs[n]=e},U=function(t,n,e){t.removeEventListener(n,e)},$=function(t){return!!t.llEvLisnrs},q=function(t){if($(t)){var n=t.llEvLisnrs;for(var e in n){var i=n[e];U(t,e,i)}delete t.llEvLisnrs}},H=function(t,n,e){!function(t){delete t.llTempImage}(t),I(e,-1),function(t){t&&(t.toLoadCount-=1)}(e),h(t,n.class_loading),n.unobserve_completed&&E(t,e)},B=function(t,n,e){var i=m(t)||t;$(i)||function(t,n,e){$(t)||(t.llEvLisnrs={});var i="VIDEO"===t.tagName?"loadeddata":"load";j(t,i,n),j(t,"error",e)}(i,(function(a){!function(t,n,e,i){var a=v(n);H(n,e,i),p(n,e.class_loaded),f(n,"loaded"),V(n,e),b(e.callback_loaded,n,i),a||S(e,i)}(0,t,n,e),q(i)}),(function(a){!function(t,n,e,i){var a=v(n);H(n,e,i),p(n,e.class_error),f(n,"error"),b(e.callback_error,n,i),a||S(e,i)}(0,t,n,e),q(i)}))},J=function(t,n,e){!function(t){t.llTempImage=document.createElement("IMG")}(t),B(t,n,e),function(t,n,e){var i=s(t,n.data_bg),a=s(t,n.data_bg_hidpi),o=r&&a?a:i;o&&(t.style.backgroundImage='url("'.concat(o,'")'),m(t).setAttribute("src",o),T(t,n,e))}(t,n,e),function(t,n,e){var i=s(t,n.data_bg_multi),a=s(t,n.data_bg_multi_hidpi),o=r&&a?a:i;o&&(t.style.backgroundImage=o,function(t,n,e){p(t,n.class_applied),f(t,"applied"),F(t,n),n.unobserve_completed&&E(t,n),b(n.callback_applied,t,e)}(t,n,e))}(t,n,e)},K=function(t,n,e){!function(t){return P.indexOf(t.tagName)>-1}(t)?J(t,n,e):function(t,n,e){B(t,n,e),G(t,n),T(t,n,e)}(t,n,e)},Q=["IMG","IFRAME"],W=function(t){return t.use_native&&"loading"in HTMLImageElement.prototype},X=function(t,n,e){t.forEach((function(t){return function(t){return t.isIntersecting||t.intersectionRatio>0}(t)?function(t,n,e,i){b(e.callback_enter,t,n,i),function(t,n,e){n.unobserve_entered&&E(t,e)}(t,e,i),function(t){return!g(t)}(t)||K(t,e,i)}(t.target,t,n,e):function(t,n,e,i){g(t)||(function(t,n,e,i){e.cancel_on_exit&&function(t){return"loading"===d(t)}(t)&&"IMG"===t.tagName&&(q(t),function(t){M(t,(function(t){N(t)})),N(t)}(t),function(t){M(t,(function(t){O(t)})),O(t)}(t),h(t,e.class_loading),I(i,-1),_(t),b(e.callback_cancel,t,n,i))}(t,n,e,i),b(e.callback_exit,t,n,i))}(t.target,t,n,e)}))},Y=function(t){return Array.prototype.slice.call(t)},Z=function(t){return t.container.querySelectorAll(t.elements_selector)},tt=function(t){return function(t){return"error"===d(t)}(t)},nt=function(t,n){return function(t){return Y(t).filter(g)}(t||Z(n))},et=function(t,e){var a=c(t);this._settings=a,this.loadingCount=0,function(t,n){i&&!W(t)&&(n._observer=new IntersectionObserver((function(e){X(e,t,n)}),function(t){return{root:t.container===document?null:t.container,rootMargin:t.thresholds||t.threshold+"px"}}(t)))}(a,this),function(t,e){n&&window.addEventListener("online",(function(){!function(t,n){var e;(e=Z(t),Y(e).filter(tt)).forEach((function(n){h(n,t.class_error),_(n)})),n.update()}(t,e)}))}(a,this),this.update(e)};return et.prototype={update:function(t){var n,a,r=this._settings,o=nt(t,r);A(this,o.length),!e&&i?W(r)?function(t,n,e){t.forEach((function(t){-1!==Q.indexOf(t.tagName)&&(t.setAttribute("loading","lazy"),function(t,n,e){B(t,n,e),G(t,n),V(t,n),f(t,"native")}(t,n,e))})),A(e,0)}(o,r,this):(a=o,function(t){t.disconnect()}(n=this._observer),function(t,n){n.forEach((function(n){t.observe(n)}))}(n,a)):this.loadAll(o)},destroy:function(){this._observer&&this._observer.disconnect(),Z(this._settings).forEach((function(t){delete t.llOriginalAttrs})),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(t){var n=this,e=this._settings;nt(t,e).forEach((function(t){K(t,e,n)}))}},et.load=function(t,n){var e=c(n);K(t,e)},et.resetStatus=function(t){_(t)},n&&function(t,n){if(n)if(n.length)for(var e,i=0;e=n[i];i+=1)l(t,e);else l(t,n)}(et,window.lazyLoadOptions),et}(); |
@@ -32,3 +32,3 @@ (function (global, factory) { | ||
| var defaultSettings = { | ||
| elements_selector: "IMG", | ||
| elements_selector: ".lazy", | ||
| container: isBot || runningOnBrowser ? document : null, | ||
@@ -51,3 +51,3 @@ threshold: 300, | ||
| unobserve_entered: false, | ||
| cancel_on_exit: false, | ||
| cancel_on_exit: true, | ||
| callback_enter: null, | ||
@@ -54,0 +54,0 @@ callback_exit: null, |
@@ -1,1 +0,1 @@ | ||
| !function(t,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n():"function"==typeof define&&define.amd?define(n):(t=t||self).LazyLoad=n()}(this,(function(){"use strict";function t(){return(t=Object.assign||function(t){for(var n=1;n<arguments.length;n++){var e=arguments[n];for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i])}return t}).apply(this,arguments)}var n="undefined"!=typeof window,e=n&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),i=n&&"IntersectionObserver"in window,a=n&&"classList"in document.createElement("p"),o=n&&window.devicePixelRatio>1,r={elements_selector:"IMG",container:e||n?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",data_bg_hidpi:"bg-hidpi",data_bg_multi:"bg-multi",data_bg_multi_hidpi:"bg-multi-hidpi",data_poster:"poster",class_applied:"applied",class_loading:"loading",class_loaded:"loaded",class_error:"error",unobserve_completed:!0,unobserve_entered:!1,cancel_on_exit:!1,callback_enter:null,callback_exit:null,callback_applied:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,callback_cancel:null,use_native:!1},c=function(n){return t({},r,n)},l=function(t,n){var e,i=new t(n);try{e=new CustomEvent("LazyLoad::Initialized",{detail:{instance:i}})}catch(t){(e=document.createEvent("CustomEvent")).initCustomEvent("LazyLoad::Initialized",!1,!1,{instance:i})}window.dispatchEvent(e)},s=function(t,n){return t.getAttribute("data-"+n)},u=function(t,n,e){var i="data-"+n;null!==e?t.setAttribute(i,e):t.removeAttribute(i)},d=function(t){return s(t,"ll-status")},f=function(t,n){return u(t,"ll-status",n)},_=function(t){return f(t,null)},g=function(t){return null===d(t)},v=function(t){return"native"===d(t)},b=function(t,n,e,i){t&&(void 0===i?void 0===e?t(n):t(n,e):t(n,e,i))},p=function(t,n){a?t.classList.add(n):t.className+=(t.className?" ":"")+n},h=function(t,n){a?t.classList.remove(n):t.className=t.className.replace(new RegExp("(^|\\s+)"+n+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},m=function(t){return t.llTempImage},E=function(t,n){if(n){var e=n._observer;e&&e.unobserve(t)}},I=function(t,n){t&&(t.loadingCount+=n)},A=function(t,n){t&&(t.toLoadCount=n)},L=function(t){for(var n,e=[],i=0;n=t.children[i];i+=1)"SOURCE"===n.tagName&&e.push(n);return e},y=function(t,n,e){e&&t.setAttribute(n,e)},w=function(t,n){t.removeAttribute(n)},k=function(t){return!!t.llOriginalAttrs},z=function(t){if(!k(t)){var n={};n.src=t.getAttribute("src"),n.srcset=t.getAttribute("srcset"),n.sizes=t.getAttribute("sizes"),t.llOriginalAttrs=n}},O=function(t){if(k(t)){var n=t.llOriginalAttrs;y(t,"src",n.src),y(t,"srcset",n.srcset),y(t,"sizes",n.sizes)}},C=function(t,n){y(t,"sizes",s(t,n.data_sizes)),y(t,"srcset",s(t,n.data_srcset)),y(t,"src",s(t,n.data_src))},M=function(t){w(t,"src"),w(t,"srcset"),w(t,"sizes")},N=function(t,n){var e=t.parentNode;e&&"PICTURE"===e.tagName&&L(e).forEach(n)},x=function(t,n){L(t).forEach(n)},R={IMG:function(t,n){N(t,(function(t){z(t),C(t,n)})),z(t),C(t,n)},IFRAME:function(t,n){y(t,"src",s(t,n.data_src))},VIDEO:function(t,n){x(t,(function(t){y(t,"src",s(t,n.data_src))})),y(t,"poster",s(t,n.data_poster)),y(t,"src",s(t,n.data_src)),t.load()}},G=function(t,n){var e=R[t.tagName];e&&e(t,n)},T=function(t,n,e){I(e,1),p(t,n.class_loading),f(t,"loading"),b(n.callback_loading,t,e)},D={IMG:function(t,n){u(t,n.data_src,null),u(t,n.data_srcset,null),u(t,n.data_sizes,null),N(t,(function(t){u(t,n.data_srcset,null),u(t,n.data_sizes,null)}))},IFRAME:function(t,n){u(t,n.data_src,null)},VIDEO:function(t,n){u(t,n.data_src,null),u(t,n.data_poster,null),x(t,(function(t){u(t,n.data_src,null)}))}},F=function(t,n){u(t,n.data_bg_multi,null),u(t,n.data_bg_multi_hidpi,null)},V=function(t,n){var e=D[t.tagName];e?e(t,n):function(t,n){u(t,n.data_bg,null),u(t,n.data_bg_hidpi,null)}(t,n)},j=["IMG","IFRAME","VIDEO"],P=function(t,n){!n||function(t){return t.loadingCount>0}(n)||function(t){return t.toLoadCount>0}(n)||b(t.callback_finish,n)},S=function(t,n,e){t.addEventListener(n,e),t.llEvLisnrs[n]=e},U=function(t,n,e){t.removeEventListener(n,e)},$=function(t){return!!t.llEvLisnrs},q=function(t){if($(t)){var n=t.llEvLisnrs;for(var e in n){var i=n[e];U(t,e,i)}delete t.llEvLisnrs}},H=function(t,n,e){!function(t){delete t.llTempImage}(t),I(e,-1),function(t){t&&(t.toLoadCount-=1)}(e),h(t,n.class_loading),n.unobserve_completed&&E(t,e)},B=function(t,n,e){var i=m(t)||t;$(i)||function(t,n,e){$(t)||(t.llEvLisnrs={});var i="VIDEO"===t.tagName?"loadeddata":"load";S(t,i,n),S(t,"error",e)}(i,(function(a){!function(t,n,e,i){var a=v(n);H(n,e,i),p(n,e.class_loaded),f(n,"loaded"),V(n,e),b(e.callback_loaded,n,i),a||P(e,i)}(0,t,n,e),q(i)}),(function(a){!function(t,n,e,i){var a=v(n);H(n,e,i),p(n,e.class_error),f(n,"error"),b(e.callback_error,n,i),a||P(e,i)}(0,t,n,e),q(i)}))},J=function(t,n,e){!function(t){t.llTempImage=document.createElement("IMG")}(t),B(t,n,e),function(t,n,e){var i=s(t,n.data_bg),a=s(t,n.data_bg_hidpi),r=o&&a?a:i;r&&(t.style.backgroundImage='url("'.concat(r,'")'),m(t).setAttribute("src",r),T(t,n,e))}(t,n,e),function(t,n,e){var i=s(t,n.data_bg_multi),a=s(t,n.data_bg_multi_hidpi),r=o&&a?a:i;r&&(t.style.backgroundImage=r,function(t,n,e){p(t,n.class_applied),f(t,"applied"),F(t,n),n.unobserve_completed&&E(t,n),b(n.callback_applied,t,e)}(t,n,e))}(t,n,e)},K=function(t,n,e){!function(t){return j.indexOf(t.tagName)>-1}(t)?J(t,n,e):function(t,n,e){B(t,n,e),G(t,n),T(t,n,e)}(t,n,e)},Q=["IMG","IFRAME"],W=function(t){return t.use_native&&"loading"in HTMLImageElement.prototype},X=function(t,n,e){t.forEach((function(t){return function(t){return t.isIntersecting||t.intersectionRatio>0}(t)?function(t,n,e,i){b(e.callback_enter,t,n,i),function(t,n,e){n.unobserve_entered&&E(t,e)}(t,e,i),function(t){return!g(t)}(t)||K(t,e,i)}(t.target,t,n,e):function(t,n,e,i){g(t)||(function(t,n,e,i){e.cancel_on_exit&&function(t){return"loading"===d(t)}(t)&&"IMG"===t.tagName&&(q(t),function(t){N(t,(function(t){M(t)})),M(t)}(t),function(t){N(t,(function(t){O(t)})),O(t)}(t),h(t,e.class_loading),I(i,-1),_(t),b(e.callback_cancel,t,n,i))}(t,n,e,i),b(e.callback_exit,t,n,i))}(t.target,t,n,e)}))},Y=function(t){return Array.prototype.slice.call(t)},Z=function(t){return t.container.querySelectorAll(t.elements_selector)},tt=function(t){return function(t){return"error"===d(t)}(t)},nt=function(t,n){return function(t){return Y(t).filter(g)}(t||Z(n))},et=function(t,e){var a=c(t);this._settings=a,this.loadingCount=0,function(t,n){i&&!W(t)&&(n._observer=new IntersectionObserver((function(e){X(e,t,n)}),function(t){return{root:t.container===document?null:t.container,rootMargin:t.thresholds||t.threshold+"px"}}(t)))}(a,this),function(t,e){n&&window.addEventListener("online",(function(){!function(t,n){var e;(e=Z(t),Y(e).filter(tt)).forEach((function(n){h(n,t.class_error),_(n)})),n.update()}(t,e)}))}(a,this),this.update(e)};return et.prototype={update:function(t){var n,a,o=this._settings,r=nt(t,o);A(this,r.length),!e&&i?W(o)?function(t,n,e){t.forEach((function(t){-1!==Q.indexOf(t.tagName)&&(t.setAttribute("loading","lazy"),function(t,n,e){B(t,n,e),G(t,n),V(t,n),f(t,"native")}(t,n,e))})),A(e,0)}(r,o,this):(a=r,function(t){t.disconnect()}(n=this._observer),function(t,n){n.forEach((function(n){t.observe(n)}))}(n,a)):this.loadAll(r)},destroy:function(){this._observer&&this._observer.disconnect(),Z(this._settings).forEach((function(t){delete t.llOriginalAttrs})),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(t){var n=this,e=this._settings;nt(t,e).forEach((function(t){K(t,e,n)}))}},et.load=function(t,n){var e=c(n);K(t,e)},et.resetStatus=function(t){_(t)},n&&function(t,n){if(n)if(n.length)for(var e,i=0;e=n[i];i+=1)l(t,e);else l(t,n)}(et,window.lazyLoadOptions),et})); | ||
| !function(t,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n():"function"==typeof define&&define.amd?define(n):(t=t||self).LazyLoad=n()}(this,(function(){"use strict";function t(){return(t=Object.assign||function(t){for(var n=1;n<arguments.length;n++){var e=arguments[n];for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i])}return t}).apply(this,arguments)}var n="undefined"!=typeof window,e=n&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),i=n&&"IntersectionObserver"in window,a=n&&"classList"in document.createElement("p"),o=n&&window.devicePixelRatio>1,r={elements_selector:".lazy",container:e||n?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",data_bg_hidpi:"bg-hidpi",data_bg_multi:"bg-multi",data_bg_multi_hidpi:"bg-multi-hidpi",data_poster:"poster",class_applied:"applied",class_loading:"loading",class_loaded:"loaded",class_error:"error",unobserve_completed:!0,unobserve_entered:!1,cancel_on_exit:!0,callback_enter:null,callback_exit:null,callback_applied:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,callback_cancel:null,use_native:!1},c=function(n){return t({},r,n)},l=function(t,n){var e,i=new t(n);try{e=new CustomEvent("LazyLoad::Initialized",{detail:{instance:i}})}catch(t){(e=document.createEvent("CustomEvent")).initCustomEvent("LazyLoad::Initialized",!1,!1,{instance:i})}window.dispatchEvent(e)},s=function(t,n){return t.getAttribute("data-"+n)},u=function(t,n,e){var i="data-"+n;null!==e?t.setAttribute(i,e):t.removeAttribute(i)},d=function(t){return s(t,"ll-status")},f=function(t,n){return u(t,"ll-status",n)},_=function(t){return f(t,null)},g=function(t){return null===d(t)},v=function(t){return"native"===d(t)},b=function(t,n,e,i){t&&(void 0===i?void 0===e?t(n):t(n,e):t(n,e,i))},p=function(t,n){a?t.classList.add(n):t.className+=(t.className?" ":"")+n},h=function(t,n){a?t.classList.remove(n):t.className=t.className.replace(new RegExp("(^|\\s+)"+n+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},m=function(t){return t.llTempImage},E=function(t,n){if(n){var e=n._observer;e&&e.unobserve(t)}},I=function(t,n){t&&(t.loadingCount+=n)},y=function(t,n){t&&(t.toLoadCount=n)},A=function(t){for(var n,e=[],i=0;n=t.children[i];i+=1)"SOURCE"===n.tagName&&e.push(n);return e},L=function(t,n,e){e&&t.setAttribute(n,e)},w=function(t,n){t.removeAttribute(n)},z=function(t){return!!t.llOriginalAttrs},k=function(t){if(!z(t)){var n={};n.src=t.getAttribute("src"),n.srcset=t.getAttribute("srcset"),n.sizes=t.getAttribute("sizes"),t.llOriginalAttrs=n}},O=function(t){if(z(t)){var n=t.llOriginalAttrs;L(t,"src",n.src),L(t,"srcset",n.srcset),L(t,"sizes",n.sizes)}},C=function(t,n){L(t,"sizes",s(t,n.data_sizes)),L(t,"srcset",s(t,n.data_srcset)),L(t,"src",s(t,n.data_src))},N=function(t){w(t,"src"),w(t,"srcset"),w(t,"sizes")},M=function(t,n){var e=t.parentNode;e&&"PICTURE"===e.tagName&&A(e).forEach(n)},x=function(t,n){A(t).forEach(n)},R={IMG:function(t,n){M(t,(function(t){k(t),C(t,n)})),k(t),C(t,n)},IFRAME:function(t,n){L(t,"src",s(t,n.data_src))},VIDEO:function(t,n){x(t,(function(t){L(t,"src",s(t,n.data_src))})),L(t,"poster",s(t,n.data_poster)),L(t,"src",s(t,n.data_src)),t.load()}},G=function(t,n){var e=R[t.tagName];e&&e(t,n)},T=function(t,n,e){I(e,1),p(t,n.class_loading),f(t,"loading"),b(n.callback_loading,t,e)},D={IMG:function(t,n){u(t,n.data_src,null),u(t,n.data_srcset,null),u(t,n.data_sizes,null),M(t,(function(t){u(t,n.data_srcset,null),u(t,n.data_sizes,null)}))},IFRAME:function(t,n){u(t,n.data_src,null)},VIDEO:function(t,n){u(t,n.data_src,null),u(t,n.data_poster,null),x(t,(function(t){u(t,n.data_src,null)}))}},F=function(t,n){u(t,n.data_bg_multi,null),u(t,n.data_bg_multi_hidpi,null)},V=function(t,n){var e=D[t.tagName];e?e(t,n):function(t,n){u(t,n.data_bg,null),u(t,n.data_bg_hidpi,null)}(t,n)},j=["IMG","IFRAME","VIDEO"],P=function(t,n){!n||function(t){return t.loadingCount>0}(n)||function(t){return t.toLoadCount>0}(n)||b(t.callback_finish,n)},S=function(t,n,e){t.addEventListener(n,e),t.llEvLisnrs[n]=e},U=function(t,n,e){t.removeEventListener(n,e)},$=function(t){return!!t.llEvLisnrs},q=function(t){if($(t)){var n=t.llEvLisnrs;for(var e in n){var i=n[e];U(t,e,i)}delete t.llEvLisnrs}},H=function(t,n,e){!function(t){delete t.llTempImage}(t),I(e,-1),function(t){t&&(t.toLoadCount-=1)}(e),h(t,n.class_loading),n.unobserve_completed&&E(t,e)},B=function(t,n,e){var i=m(t)||t;$(i)||function(t,n,e){$(t)||(t.llEvLisnrs={});var i="VIDEO"===t.tagName?"loadeddata":"load";S(t,i,n),S(t,"error",e)}(i,(function(a){!function(t,n,e,i){var a=v(n);H(n,e,i),p(n,e.class_loaded),f(n,"loaded"),V(n,e),b(e.callback_loaded,n,i),a||P(e,i)}(0,t,n,e),q(i)}),(function(a){!function(t,n,e,i){var a=v(n);H(n,e,i),p(n,e.class_error),f(n,"error"),b(e.callback_error,n,i),a||P(e,i)}(0,t,n,e),q(i)}))},J=function(t,n,e){!function(t){t.llTempImage=document.createElement("IMG")}(t),B(t,n,e),function(t,n,e){var i=s(t,n.data_bg),a=s(t,n.data_bg_hidpi),r=o&&a?a:i;r&&(t.style.backgroundImage='url("'.concat(r,'")'),m(t).setAttribute("src",r),T(t,n,e))}(t,n,e),function(t,n,e){var i=s(t,n.data_bg_multi),a=s(t,n.data_bg_multi_hidpi),r=o&&a?a:i;r&&(t.style.backgroundImage=r,function(t,n,e){p(t,n.class_applied),f(t,"applied"),F(t,n),n.unobserve_completed&&E(t,n),b(n.callback_applied,t,e)}(t,n,e))}(t,n,e)},K=function(t,n,e){!function(t){return j.indexOf(t.tagName)>-1}(t)?J(t,n,e):function(t,n,e){B(t,n,e),G(t,n),T(t,n,e)}(t,n,e)},Q=["IMG","IFRAME"],W=function(t){return t.use_native&&"loading"in HTMLImageElement.prototype},X=function(t,n,e){t.forEach((function(t){return function(t){return t.isIntersecting||t.intersectionRatio>0}(t)?function(t,n,e,i){b(e.callback_enter,t,n,i),function(t,n,e){n.unobserve_entered&&E(t,e)}(t,e,i),function(t){return!g(t)}(t)||K(t,e,i)}(t.target,t,n,e):function(t,n,e,i){g(t)||(function(t,n,e,i){e.cancel_on_exit&&function(t){return"loading"===d(t)}(t)&&"IMG"===t.tagName&&(q(t),function(t){M(t,(function(t){N(t)})),N(t)}(t),function(t){M(t,(function(t){O(t)})),O(t)}(t),h(t,e.class_loading),I(i,-1),_(t),b(e.callback_cancel,t,n,i))}(t,n,e,i),b(e.callback_exit,t,n,i))}(t.target,t,n,e)}))},Y=function(t){return Array.prototype.slice.call(t)},Z=function(t){return t.container.querySelectorAll(t.elements_selector)},tt=function(t){return function(t){return"error"===d(t)}(t)},nt=function(t,n){return function(t){return Y(t).filter(g)}(t||Z(n))},et=function(t,e){var a=c(t);this._settings=a,this.loadingCount=0,function(t,n){i&&!W(t)&&(n._observer=new IntersectionObserver((function(e){X(e,t,n)}),function(t){return{root:t.container===document?null:t.container,rootMargin:t.thresholds||t.threshold+"px"}}(t)))}(a,this),function(t,e){n&&window.addEventListener("online",(function(){!function(t,n){var e;(e=Z(t),Y(e).filter(tt)).forEach((function(n){h(n,t.class_error),_(n)})),n.update()}(t,e)}))}(a,this),this.update(e)};return et.prototype={update:function(t){var n,a,o=this._settings,r=nt(t,o);y(this,r.length),!e&&i?W(o)?function(t,n,e){t.forEach((function(t){-1!==Q.indexOf(t.tagName)&&(t.setAttribute("loading","lazy"),function(t,n,e){B(t,n,e),G(t,n),V(t,n),f(t,"native")}(t,n,e))})),y(e,0)}(r,o,this):(a=r,function(t){t.disconnect()}(n=this._observer),function(t,n){n.forEach((function(n){t.observe(n)}))}(n,a)):this.loadAll(r)},destroy:function(){this._observer&&this._observer.disconnect(),Z(this._settings).forEach((function(t){delete t.llOriginalAttrs})),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(t){var n=this,e=this._settings;nt(t,e).forEach((function(t){K(t,e,n)}))}},et.load=function(t,n){var e=c(n);K(t,e)},et.resetStatus=function(t){_(t)},n&&function(t,n){if(n)if(n.length)for(var e,i=0;e=n[i];i+=1)l(t,e);else l(t,n)}(et,window.lazyLoadOptions),et})); |
126
package.json
| { | ||
| "name": "vanilla-lazyload", | ||
| "version": "16.1.0", | ||
| "description": "LazyLoad is a lightweight (2.4 kB), flexible script that speeds up your website by deferring the loading of your below-the-fold images, backgrounds, videos, iframes and scripts to when they will enter the viewport. Written in plain \"vanilla\" JavaScript, it leverages IntersectionObserver, supports responsive images and enables native lazy loading.", | ||
| "main": "dist/lazyload.min.js", | ||
| "module": "dist/lazyload.esm.js", | ||
| "browser": "dist/lazyload.min.js", | ||
| "typings": "typings/lazyload.d.ts", | ||
| "dependencies": {}, | ||
| "devDependencies": { | ||
| "@babel/core": "^7.9.6", | ||
| "@babel/plugin-transform-object-assign": "^7.8.3", | ||
| "@babel/preset-env": "^7.9.6", | ||
| "@rollup/plugin-node-resolve": "^7.1.3", | ||
| "jest": "^25.5.4", | ||
| "rollup": "^1.32.1", | ||
| "rollup-plugin-babel": "^4.4.0", | ||
| "rollup-plugin-terser": "^5.3.0" | ||
| }, | ||
| "scripts": { | ||
| "build": "rollup -c", | ||
| "dev": "rollup -c --watch", | ||
| "test": "jest", | ||
| "devtest": "jest --watch" | ||
| }, | ||
| "files": [ | ||
| "dist", | ||
| "typings" | ||
| ], | ||
| "repository": { | ||
| "type": "git", | ||
| "url": "https://github.com/verlok/lazyload" | ||
| }, | ||
| "keywords": [ | ||
| "lazyload", | ||
| "vanilla", | ||
| "responsive", | ||
| "images", | ||
| "picture", | ||
| "srcset", | ||
| "sizes", | ||
| "native", | ||
| "SEO", | ||
| "intersectionObserver", | ||
| "progressive", | ||
| "performance", | ||
| "perfmatters", | ||
| "async", | ||
| "no-jquery" | ||
| ], | ||
| "author": { | ||
| "name": "Andrea \"verlok\" Verlicchi", | ||
| "email": "andrea.verlicchi@gmail.com", | ||
| "url": "https://www.andreaverlicchi.eu" | ||
| }, | ||
| "license": "MIT", | ||
| "bugs": { | ||
| "url": "https://github.com/verlok/lazyload/issues" | ||
| }, | ||
| "homepage": "http://verlok.github.io/lazyload", | ||
| "funding": { | ||
| "type": "individual", | ||
| "url": "https://ko-fi.com/verlok" | ||
| } | ||
| "name": "vanilla-lazyload", | ||
| "version": "17.0.0", | ||
| "description": "LazyLoad is a lightweight (2.4 kB) and flexible script that speeds up your web application by deferring the loading of your below-the-fold images, videos and iframes to when they will enter the viewport. It's written in plain \"vanilla\" JavaScript, it leverages the IntersectionObserver API, it supports responsive images, it optimizes your website for slower connections, and can enable native lazy loading.", | ||
| "main": "dist/lazyload.min.js", | ||
| "module": "dist/lazyload.esm.js", | ||
| "browser": "dist/lazyload.min.js", | ||
| "typings": "typings/lazyload.d.ts", | ||
| "dependencies": {}, | ||
| "devDependencies": { | ||
| "@babel/core": "^7.9.6", | ||
| "@babel/plugin-transform-object-assign": "^7.8.3", | ||
| "@babel/preset-env": "^7.9.6", | ||
| "@rollup/plugin-node-resolve": "^7.1.3", | ||
| "jest": "^25.5.4", | ||
| "rollup": "^1.32.1", | ||
| "rollup-plugin-babel": "^4.4.0", | ||
| "rollup-plugin-terser": "^5.3.0" | ||
| }, | ||
| "scripts": { | ||
| "build": "rollup -c", | ||
| "dev": "rollup -c --watch", | ||
| "test": "jest", | ||
| "devtest": "jest --watch" | ||
| }, | ||
| "files": [ | ||
| "dist", | ||
| "typings" | ||
| ], | ||
| "repository": { | ||
| "type": "git", | ||
| "url": "https://github.com/verlok/vanilla-lazyload" | ||
| }, | ||
| "keywords": [ | ||
| "lazyload", | ||
| "vanilla", | ||
| "responsive", | ||
| "images", | ||
| "picture", | ||
| "srcset", | ||
| "sizes", | ||
| "native", | ||
| "SEO", | ||
| "intersectionObserver", | ||
| "progressive", | ||
| "performance", | ||
| "perfmatters", | ||
| "async", | ||
| "no-jquery" | ||
| ], | ||
| "author": { | ||
| "name": "Andrea \"verlok\" Verlicchi", | ||
| "email": "andrea.verlicchi@gmail.com", | ||
| "url": "https://www.andreaverlicchi.eu" | ||
| }, | ||
| "license": "MIT", | ||
| "bugs": { | ||
| "url": "https://github.com/verlok/vanilla-lazyload/issues" | ||
| }, | ||
| "homepage": "https://www.andreaverlicchi.eu/vanilla-lazyload", | ||
| "funding": { | ||
| "type": "individual", | ||
| "url": "https://ko-fi.com/verlok" | ||
| } | ||
| } |
509
README.md
@@ -1,2 +0,2 @@ | ||
| LazyLoad is a lightweight (2.4 kB) and flexible script that **speeds up your web application** by deferring the loading of your below-the-fold images, videos and iframes to **when they will enter the viewport**. It's written in plain "vanilla" JavaScript, it leverages the [IntersectionObserver](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) API, it supports [responsive images](https://alistapart.com/article/responsive-images-in-practice) and enables native lazy loading. See [notable features](#-notable-features) for more. | ||
| LazyLoad is a lightweight (2.4 kB) and flexible script that **speeds up your web application** by deferring the loading of your below-the-fold images, videos and iframes to **when they will enter the viewport**. It's written in plain "vanilla" JavaScript, it leverages the [IntersectionObserver](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) API, it supports [responsive images](https://alistapart.com/article/responsive-images-in-practice), it optimizes your website for slower connections, and can enable native lazy loading. See [notable features](#-notable-features) for more. | ||
@@ -28,3 +28,7 @@ [](https://www.npmjs.com/package/vanilla-lazyload) | ||
| ```html | ||
| <img alt="A lazy image" src="lazy-lowQuality.jpg" data-src="lazy.jpg" /> | ||
| <img | ||
| alt="A lazy image" | ||
| src="lazy-lowQuality.jpg" | ||
| data-src="lazy.jpg" | ||
| /> | ||
| ``` | ||
@@ -36,7 +40,8 @@ | ||
| <img | ||
| alt="A lazy image" | ||
| class="lazy" | ||
| data-src="lazy.jpg" | ||
| data-srcset="lazy_400.jpg 400w, lazy_800.jpg 800w" | ||
| data-sizes="100w" | ||
| alt="A lazy image" | ||
| class="lazy" | ||
| data-src="lazy.jpg" | ||
| data-srcset="lazy_400.jpg 400w, | ||
| lazy_800.jpg 800w" | ||
| data-sizes="100w" | ||
| /> | ||
@@ -51,5 +56,17 @@ ``` | ||
| <picture> | ||
| <source media="(min-width: 1200px)" data-srcset="lazy_1200.jpg 1x, lazy_2400.jpg 2x" /> | ||
| <source media="(min-width: 800px)" data-srcset="lazy_800.jpg 1x, lazy_1600.jpg 2x" /> | ||
| <img alt="A lazy image" class="lazy" data-src="lazy.jpg" /> | ||
| <source | ||
| media="(min-width: 1200px)" | ||
| data-srcset="lazy_1200.jpg 1x, | ||
| lazy_2400.jpg 2x" | ||
| /> | ||
| <source | ||
| media="(min-width: 800px)" | ||
| data-srcset="lazy_800.jpg 1x, | ||
| lazy_1600.jpg 2x" | ||
| /> | ||
| <img | ||
| alt="A lazy image" | ||
| class="lazy" | ||
| data-src="lazy.jpg" | ||
| /> | ||
| </picture> | ||
@@ -64,14 +81,16 @@ ``` | ||
| <picture> | ||
| <source | ||
| type="image/webp" | ||
| data-srcset="lazy_400.webp 400w, lazy_800.webp 800w" | ||
| data-sizes="100w" | ||
| /> | ||
| <img | ||
| alt="A lazy image" | ||
| class="lazy" | ||
| data-src="lazy.jpg" | ||
| data-srcset="lazy_400.jpg 400w, lazy_800.jpg 800w" | ||
| data-sizes="100w" | ||
| /> | ||
| <source | ||
| type="image/webp" | ||
| data-srcset="lazy_400.webp 400w, | ||
| lazy_800.webp 800w" | ||
| data-sizes="100w" | ||
| /> | ||
| <img | ||
| alt="A lazy image" | ||
| class="lazy" | ||
| data-src="lazy.jpg" | ||
| data-srcset="lazy_400.jpg 400w, | ||
| lazy_800.jpg 800w" | ||
| data-sizes="100w" | ||
| /> | ||
| </picture> | ||
@@ -95,3 +114,7 @@ ``` | ||
| ```html | ||
| <div class="lazy" data-bg="lazy.jpg" data-bg-hidpi="lazy@2x.jpg"></div> | ||
| <div | ||
| class="lazy" | ||
| data-bg="lazy.jpg" | ||
| data-bg-hidpi="lazy@2x.jpg" | ||
| ></div> | ||
| ``` | ||
@@ -103,6 +126,8 @@ | ||
| <div | ||
| class="lazy" | ||
| data-bg-multi="url(lazy-head.jpg), url(lazy-body.jpg), linear-gradient(#fff, #ccc)" | ||
| class="lazy" | ||
| data-bg-multi="url(lazy-head.jpg), | ||
| url(lazy-body.jpg), | ||
| linear-gradient(#fff, #ccc)" | ||
| > | ||
| ... | ||
| ... | ||
| </div> | ||
@@ -117,7 +142,11 @@ ``` | ||
| <div | ||
| class="lazy" | ||
| data-bg-multi="url(lazy-head.jpg), url(lazy-body.jpg), linear-gradient(#fff, #ccc)" | ||
| data-bg-multi-hidpi="url(lazy-head@2x.jpg), url(lazy-body@2x.jpg), linear-gradient(#fff, #ccc)" | ||
| class="lazy" | ||
| data-bg-multi="url(lazy-head.jpg), | ||
| url(lazy-body.jpg), | ||
| linear-gradient(#fff, #ccc)" | ||
| data-bg-multi-hidpi="url(lazy-head@2x.jpg), | ||
| url(lazy-body@2x.jpg), | ||
| linear-gradient(#fff, #ccc)" | ||
| > | ||
| ... | ||
| ... | ||
| </div> | ||
@@ -131,6 +160,12 @@ ``` | ||
| ```html | ||
| <video class="lazy" controls width="620" data-src="lazy.mp4" data-poster="lazy.jpg"> | ||
| <source type="video/mp4" data-src="lazy.mp4" /> | ||
| <source type="video/ogg" data-src="lazy.ogg" /> | ||
| <source type="video/avi" data-src="lazy.avi" /> | ||
| <video | ||
| class="lazy" | ||
| controls | ||
| width="620" | ||
| data-src="lazy.mp4" | ||
| data-poster="lazy.jpg" | ||
| > | ||
| <source type="video/mp4" data-src="lazy.mp4" /> | ||
| <source type="video/ogg" data-src="lazy.ogg" /> | ||
| <source type="video/avi" data-src="lazy.avi" /> | ||
| </video> | ||
@@ -155,3 +190,3 @@ ``` | ||
| The latest, recommended version of LazyLoad is **16.1.0**. | ||
| The latest, recommended version of LazyLoad is **17.0.0**. | ||
@@ -173,3 +208,3 @@ Quickly understand how to upgrade from a previous version reading the [practical upgrade guide](UPGRADE.md). | ||
| ```html | ||
| <script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@16.1.0/dist/lazyload.min.js"></script> | ||
| <script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@17.0.0/dist/lazyload.min.js"></script> | ||
| ``` | ||
@@ -181,3 +216,3 @@ | ||
| <script src="https://cdn.jsdelivr.net/npm/intersection-observer@0.7.0/intersection-observer.js"></script> | ||
| <script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@16.1.0/dist/lazyload.min.js"></script> | ||
| <script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@17.0.0/dist/lazyload.min.js"></script> | ||
| ``` | ||
@@ -189,4 +224,3 @@ | ||
| var lazyLoadInstance = new LazyLoad({ | ||
| elements_selector: ".lazy" | ||
| // ... more custom settings? | ||
| // Your custom settings go here | ||
| }); | ||
@@ -216,3 +250,3 @@ ``` | ||
| ```js | ||
| var lazyLoadAmdUrl = "https://cdn.jsdelivr.net/npm/vanilla-lazyload@16.1.0/dist/lazyload.amd.min.js"; | ||
| var lazyLoadAmdUrl = "https://cdn.jsdelivr.net/npm/vanilla-lazyload@17.0.0/dist/lazyload.amd.min.js"; | ||
| var polyfillAmdUrl = "https://cdn.jsdelivr.net/npm/intersection-observer-amd@2.0.1/intersection-observer-amd.js"; | ||
@@ -231,4 +265,3 @@ | ||
| var lazyLoadInstance = new LazyLoad({ | ||
| elements_selector: ".lazy" | ||
| // ... more custom settings? | ||
| // Your custom settings go here | ||
| }); | ||
@@ -238,3 +271,3 @@ } | ||
| [DEMO](https://verlok.github.io/lazyload/demos/amd_polyfill.html) - [SOURCE](https://github.com/verlok/lazyload/blob/master/demos/amd_polyfill.html) | ||
| [DEMO](https://www.andreaverlicchi.eu/vanilla-lazyload/demos/amd_polyfill.html) - [SOURCE](https://github.com/verlok/vanilla-lazyload/blob/master/demos/amd_polyfill.html) | ||
@@ -247,12 +280,12 @@ ### Using an `async` script | ||
| - `{}` an object to get a single instance of LazyLoad | ||
| - `[{}, {}]` an array of objects to get multiple instances of LazyLoad, each one with different options. | ||
| - `{}` an object to get a single instance of LazyLoad | ||
| - `[{}, {}]` an array of objects to get multiple instances of LazyLoad, each one with different options. | ||
| ```html | ||
| <script> | ||
| // Set the options to make LazyLoad self-initialize | ||
| window.lazyLoadOptions = { | ||
| elements_selector: ".lazy" | ||
| // ... more custom settings? | ||
| }; | ||
| // Set the options globally | ||
| // to make LazyLoad self-initialize | ||
| window.lazyLoadOptions = { | ||
| // Your custom settings go here | ||
| }; | ||
| </script> | ||
@@ -265,4 +298,4 @@ ``` | ||
| <script | ||
| async | ||
| src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@16.1.0/dist/lazyload.min.js" | ||
| async | ||
| src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@17.0.0/dist/lazyload.min.js" | ||
| ></script> | ||
@@ -279,15 +312,16 @@ ``` | ||
| <script> | ||
| // Set the options to make LazyLoad self-initialize | ||
| window.lazyLoadOptions = { | ||
| elements_selector: ".lazy" | ||
| // ... more custom settings? | ||
| }; | ||
| // Listen to the initialization event and get the instance of LazyLoad | ||
| window.addEventListener( | ||
| "LazyLoad::Initialized", | ||
| function (event) { | ||
| window.lazyLoadInstance = event.detail.instance; | ||
| }, | ||
| false | ||
| ); | ||
| // Set the options globally | ||
| // to make LazyLoad self-initialize | ||
| window.lazyLoadOptions = { | ||
| // Your custom settings go here | ||
| }; | ||
| // Listen to the initialization event | ||
| // and get the instance of LazyLoad | ||
| window.addEventListener( | ||
| "LazyLoad::Initialized", | ||
| function (event) { | ||
| window.lazyLoadInstance = event.detail.instance; | ||
| }, | ||
| false | ||
| ); | ||
| </script> | ||
@@ -300,4 +334,4 @@ ``` | ||
| <script | ||
| async | ||
| src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@16.1.0/dist/lazyload.min.js" | ||
| async | ||
| src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@17.0.0/dist/lazyload.min.js" | ||
| ></script> | ||
@@ -312,25 +346,10 @@ ``` | ||
| Note about Internet Explorer: because this technique uses a `CustomEvent` ([learn more](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)) to trigger the `LazyLoad::Initialized` event, you might want to add this micro polyfill to make it work on Internet Explorer. | ||
| Note about Internet Explorer: because this technique uses a `CustomEvent` to trigger the `LazyLoad::Initialized` event, you might want to add [this polyfill](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent#Polyfill) to make it work on Internet Explorer. | ||
| ```html | ||
| <script> | ||
| // CustomEvent micro-polyfill for Internet Explorer | ||
| (function () { | ||
| if (typeof window.CustomEvent === "function") { | ||
| return false; | ||
| } | ||
| function CustomEvent(event, params) { | ||
| params = params || { bubbles: false, cancelable: false, detail: undefined }; | ||
| var evt = document.createEvent("CustomEvent"); | ||
| evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail); | ||
| return evt; | ||
| } | ||
| [DEMO](https://www.andreaverlicchi.eu/vanilla-lazyload/demos/async.html) - [SOURCE](https://github.com/verlok/vanilla-lazyload/blob/master/demos/async.html) ← for a single LazyLoad instance | ||
| CustomEvent.prototype = window.Event.prototype; | ||
| window.CustomEvent = CustomEvent; | ||
| })(); | ||
| </script> | ||
| ``` | ||
| [DEMO](https://www.andreaverlicchi.eu/vanilla-lazyload/demos/async_multiple.html) - [SOURCE](https://github.com/verlok/vanilla-lazyload/blob/master/demos/async_multiple.html) ← for multiple LazyLoad instances | ||
| ### Local install | ||
@@ -354,3 +373,3 @@ | ||
| Download one the latest [releases](https://github.com/verlok/lazyload/releases/). The files you need are inside the `dist` folder. If you don't know which one to pick, use `lazyload.min.js`, or read [about bundles](#bundles). | ||
| Download one the latest [releases](https://github.com/verlok/vanilla-lazyload/releases/). The files you need are inside the `dist` folder. If you don't know which one to pick, use `lazyload.min.js`, or read [about bundles](#bundles). | ||
@@ -367,3 +386,3 @@ ### Local usage | ||
| More information about bundling LazyLoad with WebPack are available on [this specific repo](https://github.com/verlok/lazyload-es2015-webpack-test). | ||
| More information about bundling LazyLoad with WebPack are available on [this specific repo](https://github.com/verlok/vanilla-lazyload-es2015-webpack-test). | ||
@@ -413,3 +432,3 @@ ### Usage with React | ||
| [DEMO](https://verlok.github.io/lazyload/demos/dynamic_content.html) - [SOURCE](https://github.com/verlok/lazyload/blob/master/demos/dynamic_content.html) - [API](#-api) | ||
| [DEMO](https://www.andreaverlicchi.eu/vanilla-lazyload/demos/dynamic_content.html) - [SOURCE](https://github.com/verlok/vanilla-lazyload/blob/master/demos/dynamic_content.html) - [API](#-api) | ||
@@ -425,3 +444,10 @@ ### Mixed native and JS-based lazy loading | ||
| <iframe class="lazy" data-src="lazyFrame.html"></iframe> | ||
| <video class="lazy" controls data-src="lazy.mp4" data-poster="lazy.jpg">...</video> | ||
| <video | ||
| class="lazy" | ||
| controls | ||
| data-src="lazy.mp4" | ||
| data-poster="lazy.jpg" | ||
| > | ||
| ... | ||
| </video> | ||
| <div class="lazy" data-bg="lazy.jpg"></div> | ||
@@ -435,4 +461,3 @@ ``` | ||
| const lazyContent = new LazyLoad({ | ||
| elements_selector: "img.lazy", | ||
| use_native: true // <-- there you go | ||
| use_native: true // <-- there you go | ||
| }); | ||
@@ -442,4 +467,3 @@ | ||
| const lazyBackground = new LazyLoad({ | ||
| elements_selector: "iframe.lazy, video.lazy, div.lazy" | ||
| // DON'T PASS use_native: true HERE | ||
| // DON'T PASS use_native: true HERE | ||
| }); | ||
@@ -456,3 +480,3 @@ ``` | ||
| <div class="scrollingPanel" id="scrollingPanel"> | ||
| <!-- Set of images --> | ||
| <!-- Set of images --> | ||
| </div> | ||
@@ -465,7 +489,7 @@ ``` | ||
| var myLazyLoad = new LazyLoad({ | ||
| container: document.getElementById("scrollingPanel") | ||
| container: document.getElementById("scrollingPanel") | ||
| }); | ||
| ``` | ||
| [DEMO](https://verlok.github.io/lazyload/demos/container_single.html) - [SOURCE](https://github.com/verlok/lazyload/blob/master/demos/container_single.html) - [API](#-api) | ||
| [DEMO](https://www.andreaverlicchi.eu/vanilla-lazyload/demos/container_single.html) - [SOURCE](https://github.com/verlok/vanilla-lazyload/blob/master/demos/container_single.html) - [API](#-api) | ||
@@ -478,6 +502,6 @@ If you have _multiple_ scrolling panels, you can use the following markup and code. | ||
| <div id="scrollingPanel1" class="scrollingPanel"> | ||
| <!-- Set of images --> | ||
| <!-- Set of images --> | ||
| </div> | ||
| <div id="scrollingPanel2" class="scrollingPanel"> | ||
| <!-- Set of images --> | ||
| <!-- Set of images --> | ||
| </div> | ||
@@ -490,32 +514,11 @@ ``` | ||
| var myLazyLoad1 = new LazyLoad({ | ||
| container: document.getElementById("scrollingPanel1") | ||
| container: document.getElementById("scrollingPanel1") | ||
| }); | ||
| var myLazyLoad2 = new LazyLoad({ | ||
| container: document.getElementById("scrollingPanel2") | ||
| container: document.getElementById("scrollingPanel2") | ||
| }); | ||
| ``` | ||
| [DEMO](https://verlok.github.io/lazyload/demos/container_multiple.html) - [SOURCE](https://github.com/verlok/lazyload/blob/master/demos/container_multiple.html) - [API](#-api) | ||
| [DEMO](https://www.andreaverlicchi.eu/vanilla-lazyload/demos/container_multiple.html) - [SOURCE](https://github.com/verlok/vanilla-lazyload/blob/master/demos/container_multiple.html) - [API](#-api) | ||
| ### Optimize for slower connections | ||
| > 💡 **Use case**: to cancel the loading of images that exited the viewport, in order to reserve bandwidth for the new images that entered the viewport. | ||
| HTML | ||
| ```html | ||
| <img class="lazy" alt="A lazy image" data-src="lazy.jpg" width="220" height="280" /> | ||
| ``` | ||
| Javascript | ||
| ```js | ||
| var myLazyLoad = new LazyLoad({ | ||
| elements_selector: ".lazy", | ||
| cancel_on_exit: true | ||
| }); | ||
| ``` | ||
| [DEMO](https://verlok.github.io/lazyload/demos/cancel_on_exit.html) | [SOURCE](https://github.com/verlok/lazyload/blob/master/demos/cancel_on_exit.html) | [API](#-api) | ||
| ### Lazy functions | ||
@@ -528,6 +531,6 @@ | ||
| ```html | ||
| <div data-lazy-function="foo">...</div> | ||
| <div data-lazy-function="bar">...</div> | ||
| <div data-lazy-function="buzz">...</div> | ||
| <div data-lazy-function="booya">...</div> | ||
| <div class="lazy" data-lazy-function="foo">...</div> | ||
| <div class="lazy" data-lazy-function="bar">...</div> | ||
| <div class="lazy" data-lazy-function="buzz">...</div> | ||
| <div class="lazy" data-lazy-function="booya">...</div> | ||
| ``` | ||
@@ -540,20 +543,20 @@ | ||
| window.lazyFunctions = { | ||
| foo: function (element) { | ||
| element.style.color = "red"; | ||
| console.log("foo"); | ||
| }, | ||
| bar: function (element) { | ||
| element.remove(element); | ||
| console.log("bar"); | ||
| }, | ||
| buzz: function (element) { | ||
| var span = document.createElement("span"); | ||
| span.innerText = " - buzz!"; | ||
| element.appendChild(span); | ||
| console.log("buzz"); | ||
| }, | ||
| booya: function (element) { | ||
| element.classList.add("boo"); | ||
| console.log("booya"); | ||
| } | ||
| foo: function (element) { | ||
| element.style.color = "red"; | ||
| console.log("foo"); | ||
| }, | ||
| bar: function (element) { | ||
| element.remove(element); | ||
| console.log("bar"); | ||
| }, | ||
| buzz: function (element) { | ||
| var span = document.createElement("span"); | ||
| span.innerText = " - buzz!"; | ||
| element.appendChild(span); | ||
| console.log("buzz"); | ||
| }, | ||
| booya: function (element) { | ||
| element.classList.add("boo"); | ||
| console.log("booya"); | ||
| } | ||
| }; | ||
@@ -564,18 +567,21 @@ ``` | ||
| function executeLazyFunction(element) { | ||
| var lazyFunctionName = element.getAttribute("data-lazy-function"); | ||
| var lazyFunction = window.lazyFunctions[lazyFunctionName]; // window[lazyFunctionName] to call a global | ||
| if (!lazyFunction) return; | ||
| lazyFunction(element); | ||
| var lazyFunctionName = element.getAttribute( | ||
| "data-lazy-function" | ||
| ); | ||
| var lazyFunction = window.lazyFunctions[lazyFunctionName]; | ||
| if (!lazyFunction) return; | ||
| lazyFunction(element); | ||
| } | ||
| var ll = new LazyLoad({ | ||
| elements_selector: "[data-lazy-function]", | ||
| unobserve_entered: true, // <- Avoid executing the function multiple times | ||
| callback_enter: executeLazyFunction // Assigning the function defined above | ||
| unobserve_entered: true, // <- Avoid executing the function multiple times | ||
| callback_enter: executeLazyFunction // Assigning the function defined above | ||
| }); | ||
| ``` | ||
| Use `unobserve_entered` to avoid executing the function multiple times. | ||
| That's it. Whenever an element with the `data-lazy-function` attribute enters the viewport, LazyLoad calls the `executeLazyScript` function, which gets the function name from the `data-lazy-function` attribute itself and executes it. | ||
| [DEMO](https://verlok.github.io/lazyload/demos/lazy_functions.html) - [SOURCE](https://github.com/verlok/lazyload/blob/master/demos/lazy_functions.html) - [API](#-api) | ||
| [DEMO](https://www.andreaverlicchi.eu/vanilla-lazyload/demos/lazy_functions.html) - [SOURCE](https://github.com/verlok/vanilla-lazyload/blob/master/demos/lazy_functions.html) - [API](#-api) | ||
@@ -589,27 +595,27 @@ ### Lazy initialization of multiple LazyLoad instances | ||
| ```html | ||
| <div class="horzContainer"> | ||
| <img | ||
| src="" | ||
| alt="Row 01, col 01" | ||
| data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_01_col_01&w=200&h=200" | ||
| /> | ||
| <img | ||
| src="" | ||
| alt="Row 01, col 02" | ||
| data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_01_col_02&w=200&h=200" | ||
| /> | ||
| <!-- ... --> | ||
| <div class="horizContainer"> | ||
| <img | ||
| src="" | ||
| alt="Row 01, col 01" | ||
| data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_01_col_01&w=200&h=200" | ||
| /> | ||
| <img | ||
| src="" | ||
| alt="Row 01, col 02" | ||
| data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_01_col_02&w=200&h=200" | ||
| /> | ||
| <!-- ... --> | ||
| </div> | ||
| <div class="horzContainer"> | ||
| <img | ||
| src="" | ||
| alt="Row 02, col 01" | ||
| data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_02_col_01&w=200&h=200" | ||
| /> | ||
| <img | ||
| src="" | ||
| alt="Row 02, col 02" | ||
| data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_02_col_02&w=200&h=200" | ||
| /> | ||
| <!-- ... --> | ||
| <div class="horizContainer"> | ||
| <img | ||
| src="" | ||
| alt="Row 02, col 01" | ||
| data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_02_col_01&w=200&h=200" | ||
| /> | ||
| <img | ||
| src="" | ||
| alt="Row 02, col 02" | ||
| data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_02_col_02&w=200&h=200" | ||
| /> | ||
| <!-- ... --> | ||
| </div> | ||
@@ -623,25 +629,25 @@ ``` | ||
| var initOneLazyLoad = function (horzContainerElement) { | ||
| // When the .horzContainer element enters the viewport, | ||
| // instantiate a new LazyLoad on the horzContainerElement | ||
| var oneLL = new LazyLoad({ | ||
| container: horzContainerElement | ||
| }); | ||
| // Optionally push it in the lazyLoadInstances | ||
| // array to keep track of the instances | ||
| lazyLoadInstances.push(oneLL); | ||
| var initOneLazyLoad = function (horizContainerElement) { | ||
| // When the .horizContainer element enters the viewport, | ||
| // instantiate a new LazyLoad on the horizContainerElement | ||
| var oneLL = new LazyLoad({ | ||
| container: horizContainerElement | ||
| }); | ||
| // Optionally push it in the lazyLoadInstances | ||
| // array to keep track of the instances | ||
| lazyLoadInstances.push(oneLL); | ||
| }; | ||
| // The "lazyLazy" instance of lazyload is used to check | ||
| // when the .horzContainer divs enter the viewport | ||
| // when the .horizContainer divs enter the viewport | ||
| var lazyLazy = new LazyLoad({ | ||
| elements_selector: ".horzContainer", | ||
| callback_enter: initOneLazyLoad, | ||
| unobserve_entered: true // Stop observing .horzContainer(s) after they entered | ||
| elements_selector: ".horizContainer", | ||
| callback_enter: initOneLazyLoad, | ||
| unobserve_entered: true // Stop observing .horizContainer(s) after they entered | ||
| }); | ||
| ``` | ||
| That's it. Whenever a `.horzContainer` element enters the viewport, LazyLoad calls the `initOneLazyLoad` function, which creates a new instance of LazyLoad on the `.horzContainer` element. | ||
| That's it. Whenever a `.horizContainer` element enters the viewport, LazyLoad calls the `initOneLazyLoad` function, which creates a new instance of LazyLoad on the `.horizContainer` element. | ||
| [DEMO](https://verlok.github.io/lazyload/demos/lazily_load_lazyLoad.html) - [SOURCE](https://github.com/verlok/lazyload/blob/master/demos/lazily_load_lazyLoad.html) - [API](#-api) | ||
| [DEMO](https://www.andreaverlicchi.eu/vanilla-lazyload/demos/lazily_load_lazyLoad.html) - [SOURCE](https://github.com/verlok/vanilla-lazyload/blob/master/demos/lazily_load_lazyLoad.html) - [API](#-api) | ||
@@ -658,38 +664,38 @@ --- | ||
| The [demos](https://github.com/verlok/lazyload/tree/master/demos) folder contains 20+ use cases of LazyLoad. You might find there what you're looking for. | ||
| The [demos](https://github.com/verlok/vanilla-lazyload/tree/master/demos) folder contains 30+ use cases of vanilla-lazyload. You might find there what you're looking for. | ||
| | Type | Title | Code | Live demo | | ||
| | --------- | ---------------------------------------------------------------------------------------------- | ---------------------------------------------- | -------------------------------------------------------------------------------------- | | ||
| | Content | Simple lazy loaded images, not using any placeholder | [Code](demos/image_basic.html) | [Live](https://www.andreaverlicchi.eu/lazyload/demos/image_basic.html) | | ||
| | Content | Lazy images that use an inline SVG as a placeholder | [Code](demos/image_ph_inline.html) | [Live](https://www.andreaverlicchi.eu/lazyload/demos/image_ph_inline.html) | | ||
| | Content | Lazy images that use an external SVG file as a placeholder | [Code](demos/image_ph_external.html) | [Live](https://www.andreaverlicchi.eu/lazyload/demos/image_ph_external.html) | | ||
| | Content | Lazy responsive images with `srcset` | [Code](demos/image_srcset.html) | [Live](https://www.andreaverlicchi.eu/lazyload/demos/image_srcset.html) | | ||
| | Content | Lazy responsive images with the `<picture>` tag and the `media` attribute (art direction) | [Code](demos/picture_media.html) | [Live](https://www.andreaverlicchi.eu/lazyload/demos/picture_media.html) | | ||
| | Content | Lazy responsive images with `srcset` and `sizes` (using `data-sizes`) | [Code](demos/image_srcset_lazy_sizes.html) | [Live](https://www.andreaverlicchi.eu/lazyload/demos/image_srcset_lazy_sizes.html) | | ||
| | Content | Lazy responsive images with `srcset` and `sizes` (using plain `sizes`) | [Code](demos/image_srcset_sizes.html) | [Live](https://www.andreaverlicchi.eu/lazyload/demos/image_srcset_sizes.html) | | ||
| | Content | Lazy video with multiple `<source>` tags | [Code](demos/video.html) | [Live](https://www.andreaverlicchi.eu/lazyload/demos/video.html) | | ||
| | Content | Lazy loading background images | [Code](demos/background_images.html) | [Live](https://www.andreaverlicchi.eu/lazyload/demos/background_images.html) | | ||
| | Content | Lazy loading multiple background images | [Code](demos/background_images_multi.html) | [Live](https://www.andreaverlicchi.eu/lazyload/demos/background_images_multi.html) | | ||
| | Content | Lazy WebP images with the `<picture>` tag and the `type` attribute for WebP | [Code](demos/picture_type_webp.html) | [Live](https://www.andreaverlicchi.eu/lazyload/demos/picture_type_webp.html) | | ||
| | Loading | Asynchronous loading LazyLoad with requireJS | [Code](demos/amd.html) | [Live](https://www.andreaverlicchi.eu/lazyload/demos/amd.html) | | ||
| | Loading | Asynchronous loading LazyLoad + InterserctionObserver with requireJS | [Code](demos/amd_polyfill.html) | [Live](https://www.andreaverlicchi.eu/lazyload/demos/amd_polyfill.html) | | ||
| | Loading | Asynchronous loading LazyLoad with `<script async>` | [Code](demos/async.html) | [Live](https://www.andreaverlicchi.eu/lazyload/demos/async.html) | | ||
| | Technique | Fade in images as they load | [Code](demos/fade_in.html) | [Live](https://www.andreaverlicchi.eu/lazyload/demos/fade_in.html) | | ||
| | Technique | Lazily create lazyload instances | [Code](demos/lazily_load_lazyLoad.html) | [Live](https://www.andreaverlicchi.eu/lazyload/demos/lazily_load_lazyLoad.html) | | ||
| | Technique | Lazily execute functions as specific elements enter the viewport | [Code](demos/lazy_functions.html) | [Live](https://www.andreaverlicchi.eu/lazyload/demos/lazy_functions.html) | | ||
| | Technique | How to manage the print of a page with lazy images | [Code](demos/print.html) | [Live](https://www.andreaverlicchi.eu/lazyload/demos/print.html) | | ||
| | Technique | A popup layer containing lazy images in a scrolling container | [Code](demos/popup_layer.html) | [Live](https://www.andreaverlicchi.eu/lazyload/demos/popup_layer.html) | | ||
| | Settings | Multiple scrolling containers | [Code](demos/container_multiple.html) | [Live](https://www.andreaverlicchi.eu/lazyload/demos/container_multiple.html) | | ||
| | Settings | Single scrolling container | [Code](demos/container_single.html) | [Live](https://www.andreaverlicchi.eu/lazyload/demos/container_single.html) | | ||
| | Settings | Cancel downloads on exit, optimizing for slow connections | [Code](demos/cancel_on_exit.html) | [Live](https://www.andreaverlicchi.eu/lazyload/demos/cancel_on_exit.html) | | ||
| | Methods | How to `destroy()` LazyLoad | [Code](demos/destroy.html) | [Live](https://www.andreaverlicchi.eu/lazyload/demos/destroy.html) | | ||
| | Methods | Adding dynamic content, then `update()` LazyLoad | [Code](demos/dynamic_content.html) | [Live](https://www.andreaverlicchi.eu/lazyload/demos/dynamic_content.html) | | ||
| | Methods | Adding dynamic content, then `update()` LazyLoad passing a NodeSet of elements | [Code](demos/dynamic_content_nodeset.html) | [Live](https://www.andreaverlicchi.eu/lazyload/demos/dynamic_content_nodeset.html) | | ||
| | Methods | Load punctual images using the `load()` method | [Code](demos/load.html) | [Live](https://www.andreaverlicchi.eu/lazyload/demos/load.html) | | ||
| | Methods | Load all images at once using `loadAll()` | [Code](demos/load_all.html) | [Live](https://www.andreaverlicchi.eu/lazyload/demos/load_all.html) | | ||
| | Test | Test for multiple thresholds | [Code](demos/thresholds.html) | [Live](https://www.andreaverlicchi.eu/lazyload/demos/thresholds.html) | | ||
| | Test | Test behaviour with hidden images | [Code](demos/image_hidden.html) | [Live](https://www.andreaverlicchi.eu/lazyload/demos/image_hidden.html) | | ||
| | Test | Test performance, lazy loading of hundreds of images | [Code](demos/hundreds.html) | [Live](https://www.andreaverlicchi.eu/lazyload/demos/hundreds.html) | | ||
| | Native | Test the native lazy loading of images _WITHOUT_ any line of javascript, not even this script | [Code](demos/native_lazyload.html) | [Live](https://www.andreaverlicchi.eu/lazyload/demos/native_lazyload.html) | | ||
| | Native | Test the native lazy loading of images _conditionally_ using the `use_native` option (see API) | [Code](demos/native_lazyload_conditional.html) | [Live](https://www.andreaverlicchi.eu/lazyload/demos/native_lazyload_conditional.html) | | ||
| | Type | Title | Code | Demo | | ||
| | --------- | ---------------------------------------------------------------------------------------------- | ---------------------------------------------- | ---------------------------------------------------------------------------------------------- | | ||
| | Content | Simple lazy loaded images, not using any placeholder | [Code](demos/image_basic.html) | [Live](https://www.andreaverlicchi.eu/vanilla-lazyload/demos/image_basic.html) | | ||
| | Content | Lazy images that use an inline SVG as a placeholder | [Code](demos/image_ph_inline.html) | [Live](https://www.andreaverlicchi.eu/vanilla-lazyload/demos/image_ph_inline.html) | | ||
| | Content | Lazy images that use an external SVG file as a placeholder | [Code](demos/image_ph_external.html) | [Live](https://www.andreaverlicchi.eu/vanilla-lazyload/demos/image_ph_external.html) | | ||
| | Content | Lazy responsive images with `srcset` | [Code](demos/image_srcset.html) | [Live](https://www.andreaverlicchi.eu/vanilla-lazyload/demos/image_srcset.html) | | ||
| | Content | Lazy responsive images with the `<picture>` tag and the `media` attribute (art direction) | [Code](demos/picture_media.html) | [Live](https://www.andreaverlicchi.eu/vanilla-lazyload/demos/picture_media.html) | | ||
| | Content | Lazy responsive images with `srcset` and `sizes` (using `data-sizes`) | [Code](demos/image_srcset_lazy_sizes.html) | [Live](https://www.andreaverlicchi.eu/vanilla-lazyload/demos/image_srcset_lazy_sizes.html) | | ||
| | Content | Lazy responsive images with `srcset` and `sizes` (using plain `sizes`) | [Code](demos/image_srcset_sizes.html) | [Live](https://www.andreaverlicchi.eu/vanilla-lazyload/demos/image_srcset_sizes.html) | | ||
| | Content | Lazy video with multiple `<source>` tags | [Code](demos/video.html) | [Live](https://www.andreaverlicchi.eu/vanilla-lazyload/demos/video.html) | | ||
| | Content | Lazy loading background images | [Code](demos/background_images.html) | [Live](https://www.andreaverlicchi.eu/vanilla-lazyload/demos/background_images.html) | | ||
| | Content | Lazy loading multiple background images | [Code](demos/background_images_multi.html) | [Live](https://www.andreaverlicchi.eu/vanilla-lazyload/demos/background_images_multi.html) | | ||
| | Content | Lazy WebP images with the `<picture>` tag and the `type` attribute for WebP | [Code](demos/picture_type_webp.html) | [Live](https://www.andreaverlicchi.eu/vanilla-lazyload/demos/picture_type_webp.html) | | ||
| | Loading | Asynchronous loading LazyLoad with requireJS | [Code](demos/amd.html) | [Live](https://www.andreaverlicchi.eu/vanilla-lazyload/demos/amd.html) | | ||
| | Loading | Asynchronous loading LazyLoad + InterserctionObserver with requireJS | [Code](demos/amd_polyfill.html) | [Live](https://www.andreaverlicchi.eu/vanilla-lazyload/demos/amd_polyfill.html) | | ||
| | Loading | Asynchronous loading LazyLoad with `<script async>` | [Code](demos/async.html) | [Live](https://www.andreaverlicchi.eu/vanilla-lazyload/demos/async.html) | | ||
| | Loading | Asynchronous loading multiple LazyLoad instances with `<script async>` | [Code](demos/async_multiple.html) | [Live](https://www.andreaverlicchi.eu/vanilla-lazyload/demos/async_multiple.html) | | ||
| | Technique | Fade in images as they load | [Code](demos/fade_in.html) | [Live](https://www.andreaverlicchi.eu/vanilla-lazyload/demos/fade_in.html) | | ||
| | Technique | Lazily create lazyload instances | [Code](demos/lazily_load_lazyLoad.html) | [Live](https://www.andreaverlicchi.eu/vanilla-lazyload/demos/lazily_load_lazyLoad.html) | | ||
| | Technique | Lazily execute functions as specific elements enter the viewport | [Code](demos/lazy_functions.html) | [Live](https://www.andreaverlicchi.eu/vanilla-lazyload/demos/lazy_functions.html) | | ||
| | Technique | How to manage the print of a page with lazy images | [Code](demos/print.html) | [Live](https://www.andreaverlicchi.eu/vanilla-lazyload/demos/print.html) | | ||
| | Technique | A popup layer containing lazy images in a scrolling container | [Code](demos/popup_layer.html) | [Live](https://www.andreaverlicchi.eu/vanilla-lazyload/demos/popup_layer.html) | | ||
| | Settings | Multiple scrolling containers | [Code](demos/container_multiple.html) | [Live](https://www.andreaverlicchi.eu/vanilla-lazyload/demos/container_multiple.html) | | ||
| | Settings | Single scrolling container | [Code](demos/container_single.html) | [Live](https://www.andreaverlicchi.eu/vanilla-lazyload/demos/container_single.html) | | ||
| | Methods | How to `destroy()` LazyLoad | [Code](demos/destroy.html) | [Live](https://www.andreaverlicchi.eu/vanilla-lazyload/demos/destroy.html) | | ||
| | Methods | Adding dynamic content, then `update()` LazyLoad | [Code](demos/dynamic_content.html) | [Live](https://www.andreaverlicchi.eu/vanilla-lazyload/demos/dynamic_content.html) | | ||
| | Methods | Adding dynamic content, then `update()` LazyLoad passing a NodeSet of elements | [Code](demos/dynamic_content_nodeset.html) | [Live](https://www.andreaverlicchi.eu/vanilla-lazyload/demos/dynamic_content_nodeset.html) | | ||
| | Methods | Load punctual images using the `load()` method | [Code](demos/load.html) | [Live](https://www.andreaverlicchi.eu/vanilla-lazyload/demos/load.html) | | ||
| | Methods | Load all images at once using `loadAll()` | [Code](demos/load_all.html) | [Live](https://www.andreaverlicchi.eu/vanilla-lazyload/demos/load_all.html) | | ||
| | Test | Test for multiple thresholds | [Code](demos/thresholds.html) | [Live](https://www.andreaverlicchi.eu/vanilla-lazyload/demos/thresholds.html) | | ||
| | Test | Test behaviour with hidden images | [Code](demos/image_hidden.html) | [Live](https://www.andreaverlicchi.eu/vanilla-lazyload/demos/image_hidden.html) | | ||
| | Test | Test performance, lazy loading of hundreds of images | [Code](demos/hundreds.html) | [Live](https://www.andreaverlicchi.eu/vanilla-lazyload/demos/hundreds.html) | | ||
| | Native | Test the native lazy loading of images _WITHOUT_ any line of javascript, not even this script | [Code](demos/native_lazyload.html) | [Live](https://www.andreaverlicchi.eu/vanilla-lazyload/demos/native_lazyload.html) | | ||
| | Native | Test the native lazy loading of images _conditionally_ using the `use_native` option (see API) | [Code](demos/native_lazyload_conditional.html) | [Live](https://www.andreaverlicchi.eu/vanilla-lazyload/demos/native_lazyload_conditional.html) | | ||
@@ -708,3 +714,3 @@ --- | ||
| There are [many ways to avoid content reflow](https://css-tricks.com/preventing-content-reflow-from-lazy-loaded-images/). I've [tested three of them](https://github.com/verlok/lazyload_placeholders_test) and found that the fastest is to **avoid using a placeholder at all**, and use the vertical padding trick. | ||
| There are [many ways to avoid content reflow](https://css-tricks.com/preventing-content-reflow-from-lazy-loaded-images/). I've [tested three of them](https://github.com/verlok/vanilla-lazyload_placeholders_test) and found that the fastest is to **avoid using a placeholder at all**, and use the vertical padding trick. | ||
@@ -715,3 +721,7 @@ #### Vertical padding trick | ||
| <div class="image-wrapper"> | ||
| <img class="lazy image" alt="An image" data-src="lazy.jpg" /> | ||
| <img | ||
| class="lazy image" | ||
| alt="An image" | ||
| data-src="lazy.jpg" | ||
| /> | ||
| </div> | ||
@@ -722,11 +732,12 @@ ``` | ||
| .image-wrapper { | ||
| width: 100%; | ||
| height: 0; | ||
| padding-bottom: 150%; /* You define this doing image height / width * 100% */ | ||
| position: relative; | ||
| width: 100%; | ||
| height: 0; | ||
| padding-bottom: 150%; | ||
| /* 👆 image height / width * 100% */ | ||
| position: relative; | ||
| } | ||
| .image { | ||
| width: 100%; | ||
| height: auto; | ||
| position: absolute; | ||
| width: 100%; | ||
| height: auto; | ||
| position: absolute; | ||
| } | ||
@@ -743,5 +754,7 @@ ``` | ||
| <img | ||
| src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3C/svg%3E" | ||
| data-src="//picsum.photos/900/600" | ||
| alt="Lazy loading test image" | ||
| src="data:image/svg+xml,%3Csvg | ||
| xmlns='http://www.w3.org/2000/svg' | ||
| viewBox='0 0 3 2'%3E%3C/svg%3E" | ||
| data-src="//picsum.photos/900/600" | ||
| alt="Lazy loading test image" | ||
| /> | ||
@@ -775,7 +788,7 @@ ``` | ||
| var aLazyLoad = new LazyLoad({ | ||
| /* options here */ | ||
| /* options here */ | ||
| }); | ||
| ``` | ||
| In the rare cases where you can't or don't want to select the elements using `elements_selector` and you have a reference variable to your elements set (can be a NodeSet or an array of elements), you can pass the elements set as the second parameter. | ||
| In the unusual cases when you can't select the elements using `elements_selector`, you could pass the elements set as a second parameter. It can be either a NodeSet or an array of DOM elements. | ||
@@ -785,6 +798,6 @@ ```js | ||
| var aLazyLoad = new LazyLoad( | ||
| { | ||
| /* options here */ | ||
| }, | ||
| elementsToLazyLoad | ||
| { | ||
| /* options here */ | ||
| }, | ||
| elementsToLazyLoad | ||
| ); | ||
@@ -801,3 +814,3 @@ ``` | ||
| | `container` | The scrolling container of the elements in the `elements_selector` option. | `document` | `document.querySelector('.scrollPanel')` | | ||
| | `elements_selector` | The CSS selector of the elements to load lazily, which will be selected as descendants of the `container` object. | `"img"` | `".images img.lazy"` | | ||
| | `elements_selector` | The CSS selector of the elements to load lazily, which will be selected as descendants of the `container` object. | `".lazy"` | `".lazyload"` | | ||
| | `threshold` | A number of pixels representing the outer distance off the scrolling area from which to start loading the elements. | `300` | `0` | | ||
@@ -817,3 +830,3 @@ | `thresholds` | Similar to `threshold`, but accepting multiple values and both `px` and `%` units. It maps directly to the `rootMargin` property of IntersectionObserver ([read more](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/rootMargin)), so it must be a string with a syntax similar to the CSS `margin` property. You can use it when you need to have different thresholds for the scrolling area. It overrides `threshold` when passed. | `null` | `"500px 10%"` | | ||
| | `class_error` | The class applied to the elements when the element causes an error. | `"error"` | `"lazy-error"` | | ||
| | `cancel_on_exit` | A boolean that defines whether or not to cancel the download of the images that exit the viewport while they are still loading, eventually restoring the original attributes. It applies only to images so to the `img` (and `picture`) tags, so it doesn't apply to background images, `iframe`s nor `video`s. | `false` | `true` | | ||
| | `cancel_on_exit` | A boolean that defines whether or not to cancel the download of the images that exit the viewport while they are still loading, eventually restoring the original attributes. It applies only to images so to the `img` (and `picture`) tags, so it doesn't apply to background images, `iframe`s nor `video`s. | `true` | `false` | | ||
| | `unobserve_entered` | A boolean that defines whether or not to automatically unobserve elements once they entered the viewport | `true` | `false` | | ||
@@ -887,3 +900,3 @@ | `unobserve_completed` | A boolean that defines whether or not to automatically unobserve elements once they've loaded or throwed an error | `false` | `true` | | ||
| Activating the `cancel_on_exit` option, you can tell LazyLoad to optimize for slow connection by cancelling the download of images when they exit the viewport. | ||
| _LazyLoad_ optimizes for slow connections by cancelling the download of images when they exit the viewport. | ||
@@ -890,0 +903,0 @@ ### Support for responsive images |
@@ -0,0 +0,0 @@ interface ILazyLoadOptions { |
Sorry, the diff of this file is not supported yet
Fixed alerts
No website
QualityPackage does not have a website.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by0.35%
217061
- Number of package files
- increased by7.69%
14
- Number of low quality alerts
- decreased by-100%
0
- Number of lines in readme file
- increased by1.5%
877
No dependency changes