Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
vanilla-lazyload
Advanced tools
vanilla-lazyload - npm Package Compare versions
Comparing version 17.8.3 to 17.8.4
| { | ||
| "name": "vanilla-lazyload", | ||
| "version": "17.8.3", | ||
| "version": "17.8.4", | ||
| "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.", | ||
@@ -5,0 +5,0 @@ "main": "dist/lazyload.min.js", |
104
README.md
@@ -178,3 +178,3 @@ 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, animated SVGs, 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 [all features](#-all-features-compared) for more. | ||
| The latest, recommended version of LazyLoad is **17.8.3**. | ||
| The latest, recommended version of LazyLoad is **17.8.4**. | ||
@@ -188,3 +188,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@17.8.3/dist/lazyload.min.js"></script> | ||
| <script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@17.8.4/dist/lazyload.min.js"></script> | ||
| ``` | ||
@@ -230,3 +230,3 @@ | ||
| async | ||
| src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@17.8.3/dist/lazyload.min.js" | ||
| src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@17.8.4/dist/lazyload.min.js" | ||
| ></script> | ||
@@ -265,3 +265,3 @@ ``` | ||
| async | ||
| src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@17.8.3/dist/lazyload.min.js" | ||
| src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@17.8.4/dist/lazyload.min.js" | ||
| ></script> | ||
@@ -278,5 +278,5 @@ ``` | ||
| [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 | ||
| [DEMO](https://verlok.github.io/vanilla-lazyload/demos/async.html) - [SOURCE](https://github.com/verlok/vanilla-lazyload/blob/master/demos/async.html) ← for a single LazyLoad instance | ||
| [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 | ||
| [DEMO](https://verlok.github.io/vanilla-lazyload/demos/async_multiple.html) - [SOURCE](https://github.com/verlok/vanilla-lazyload/blob/master/demos/async_multiple.html) ← for multiple LazyLoad instances | ||
@@ -389,3 +389,3 @@ ### Local install | ||
| [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) | ||
| [DEMO](https://verlok.github.io/vanilla-lazyload/demos/dynamic_content.html) - [SOURCE](https://github.com/verlok/vanilla-lazyload/blob/master/demos/dynamic_content.html) - [API](#-api) | ||
@@ -420,3 +420,3 @@ ### Mixed native and JS-based lazy loading | ||
| [DEMO](https://www.andreaverlicchi.eu/vanilla-lazyload/demos/native_lazyload_conditional.html) - [SOURCE](https://github.com/verlok/vanilla-lazyload/blob/master/demos/native_lazyload_conditional.html) - [API](#-api) | ||
| [DEMO](https://verlok.github.io/vanilla-lazyload/demos/native_lazyload_conditional.html) - [SOURCE](https://github.com/verlok/vanilla-lazyload/blob/master/demos/native_lazyload_conditional.html) - [API](#-api) | ||
@@ -443,3 +443,3 @@ ### Scrolling panel(s) | ||
| [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) | ||
| [DEMO](https://verlok.github.io/vanilla-lazyload/demos/container_single.html) - [SOURCE](https://github.com/verlok/vanilla-lazyload/blob/master/demos/container_single.html) - [API](#-api) | ||
@@ -470,3 +470,3 @@ If you have _multiple_ scrolling panels, you can use the following markup and code. | ||
| [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) | ||
| [DEMO](https://verlok.github.io/vanilla-lazyload/demos/container_multiple.html) - [SOURCE](https://github.com/verlok/vanilla-lazyload/blob/master/demos/container_multiple.html) - [API](#-api) | ||
@@ -530,3 +530,3 @@ ### Lazy functions | ||
| [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) | ||
| [DEMO](https://verlok.github.io/vanilla-lazyload/demos/lazy_functions.html) - [SOURCE](https://github.com/verlok/vanilla-lazyload/blob/master/demos/lazy_functions.html) - [API](#-api) | ||
@@ -595,3 +595,3 @@ ### Lazy initialization of multiple LazyLoad instances | ||
| [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) | ||
| [DEMO](https://verlok.github.io/vanilla-lazyload/demos/lazily_load_lazyLoad.html) - [SOURCE](https://github.com/verlok/vanilla-lazyload/blob/master/demos/lazily_load_lazyLoad.html) - [API](#-api) | ||
@@ -612,41 +612,41 @@ --- | ||
| | --------- | ---------------------------------------------------------------------------------------------- | ---------------------------------------------- | ---------------------------------------------------------------------------------------------- | | ||
| | 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, different preload options, NO autoplay | [Code](demos/video.html) | [Live](https://www.andreaverlicchi.eu/vanilla-lazyload/demos/video.html) | | ||
| | Content | Lazy video with multiple `<source>` tags, different preload options, WITH autoplay | [Code](demos/video_autoplay.html) | [Live](https://www.andreaverlicchi.eu/vanilla-lazyload/demos/video_autoplay.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 loading background images with `image-set()` | [Code](demos/background_images_image-set.html) | [Live](https://www.andreaverlicchi.eu/vanilla-lazyload/demos/background_images_image-set.html) | | ||
| | Content | Lazy loading iframes | [Code](demos/iframes.html) | [Live](https://www.andreaverlicchi.eu/vanilla-lazyload/demos/iframes.html) | | ||
| | Content | Lazy loading animated SVGs and PDF files | [Code](demos/objects.html) | [Live](https://www.andreaverlicchi.eu/vanilla-lazyload/demos/objects.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) | | ||
| | Error | Test error loading behaviour when `restore_on_error` is `false` | [Code](demos/error_no_restore.html) | [Live](https://www.andreaverlicchi.eu/vanilla-lazyload/demos/error_no_restore.html) | | ||
| | Error | Test error loading behaviour when `restore_on_error` is `true` | [Code](demos/error_restore.html) | [Live](https://www.andreaverlicchi.eu/vanilla-lazyload/demos/error_restore.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 | Lazy load images in CSS-only horizontal sliders (Netflix style) | [Code](demos/sliders_css_only.html) | [Live](https://www.andreaverlicchi.eu/vanilla-lazyload/demos/sliders_css_only.html) | | ||
| | Technique | Lazily create Swiper instances and lazily load Swiper images | [Code](demos/swiper.html) | [Live](https://www.andreaverlicchi.eu/vanilla-lazyload/demos/swiper.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 `restore()` DOM to its original state, and/or `destroy()` LazyLoad | [Code](demos/restore_destroy.html) | [Live](https://www.andreaverlicchi.eu/vanilla-lazyload/demos/restore_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) | | ||
| | Content | Simple lazy loaded images, not using any placeholder | [Code](demos/image_basic.html) | [Live](https://verlok.github.io/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://verlok.github.io/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://verlok.github.io/vanilla-lazyload/demos/image_ph_external.html) | | ||
| | Content | Lazy responsive images with `srcset` | [Code](demos/image_srcset.html) | [Live](https://verlok.github.io/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://verlok.github.io/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://verlok.github.io/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://verlok.github.io/vanilla-lazyload/demos/image_srcset_sizes.html) | | ||
| | Content | Lazy video with multiple `<source>` tags, different preload options, NO autoplay | [Code](demos/video.html) | [Live](https://verlok.github.io/vanilla-lazyload/demos/video.html) | | ||
| | Content | Lazy video with multiple `<source>` tags, different preload options, WITH autoplay | [Code](demos/video_autoplay.html) | [Live](https://verlok.github.io/vanilla-lazyload/demos/video_autoplay.html) | | ||
| | Content | Lazy loading background images | [Code](demos/background_images.html) | [Live](https://verlok.github.io/vanilla-lazyload/demos/background_images.html) | | ||
| | Content | Lazy loading multiple background images | [Code](demos/background_images_multi.html) | [Live](https://verlok.github.io/vanilla-lazyload/demos/background_images_multi.html) | | ||
| | Content | Lazy loading background images with `image-set()` | [Code](demos/background_images_image-set.html) | [Live](https://verlok.github.io/vanilla-lazyload/demos/background_images_image-set.html) | | ||
| | Content | Lazy loading iframes | [Code](demos/iframes.html) | [Live](https://verlok.github.io/vanilla-lazyload/demos/iframes.html) | | ||
| | Content | Lazy loading animated SVGs and PDF files | [Code](demos/objects.html) | [Live](https://verlok.github.io/vanilla-lazyload/demos/objects.html) | | ||
| | Content | Lazy WebP images with the `<picture>` tag and the `type` attribute for WebP | [Code](demos/picture_type_webp.html) | [Live](https://verlok.github.io/vanilla-lazyload/demos/picture_type_webp.html) | | ||
| | Loading | Asynchronous loading LazyLoad with requireJS | [Code](demos/amd.html) | [Live](https://verlok.github.io/vanilla-lazyload/demos/amd.html) | | ||
| | Loading | Asynchronous loading LazyLoad + InterserctionObserver with requireJS | [Code](demos/amd_polyfill.html) | [Live](https://verlok.github.io/vanilla-lazyload/demos/amd_polyfill.html) | | ||
| | Loading | Asynchronous loading LazyLoad with `<script async>` | [Code](demos/async.html) | [Live](https://verlok.github.io/vanilla-lazyload/demos/async.html) | | ||
| | Loading | Asynchronous loading multiple LazyLoad instances with `<script async>` | [Code](demos/async_multiple.html) | [Live](https://verlok.github.io/vanilla-lazyload/demos/async_multiple.html) | | ||
| | Error | Test error loading behaviour when `restore_on_error` is `false` | [Code](demos/error_no_restore.html) | [Live](https://verlok.github.io/vanilla-lazyload/demos/error_no_restore.html) | | ||
| | Error | Test error loading behaviour when `restore_on_error` is `true` | [Code](demos/error_restore.html) | [Live](https://verlok.github.io/vanilla-lazyload/demos/error_restore.html) | | ||
| | Technique | Fade in images as they load | [Code](demos/fade_in.html) | [Live](https://verlok.github.io/vanilla-lazyload/demos/fade_in.html) | | ||
| | Technique | Lazy load images in CSS-only horizontal sliders (Netflix style) | [Code](demos/sliders_css_only.html) | [Live](https://verlok.github.io/vanilla-lazyload/demos/sliders_css_only.html) | | ||
| | Technique | Lazily create Swiper instances and lazily load Swiper images | [Code](demos/swiper.html) | [Live](https://verlok.github.io/vanilla-lazyload/demos/swiper.html) | | ||
| | Technique | Lazily execute functions as specific elements enter the viewport | [Code](demos/lazy_functions.html) | [Live](https://verlok.github.io/vanilla-lazyload/demos/lazy_functions.html) | | ||
| | Technique | How to manage the print of a page with lazy images | [Code](demos/print.html) | [Live](https://verlok.github.io/vanilla-lazyload/demos/print.html) | | ||
| | Technique | A popup layer containing lazy images in a scrolling container | [Code](demos/popup_layer.html) | [Live](https://verlok.github.io/vanilla-lazyload/demos/popup_layer.html) | | ||
| | Settings | Multiple scrolling containers | [Code](demos/container_multiple.html) | [Live](https://verlok.github.io/vanilla-lazyload/demos/container_multiple.html) | | ||
| | Settings | Single scrolling container | [Code](demos/container_single.html) | [Live](https://verlok.github.io/vanilla-lazyload/demos/container_single.html) | | ||
| | Methods | How to `restore()` DOM to its original state, and/or `destroy()` LazyLoad | [Code](demos/restore_destroy.html) | [Live](https://verlok.github.io/vanilla-lazyload/demos/restore_destroy.html) | | ||
| | Methods | Adding dynamic content, then `update()` LazyLoad | [Code](demos/dynamic_content.html) | [Live](https://verlok.github.io/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://verlok.github.io/vanilla-lazyload/demos/dynamic_content_nodeset.html) | | ||
| | Methods | Load punctual images using the `load()` method | [Code](demos/load.html) | [Live](https://verlok.github.io/vanilla-lazyload/demos/load.html) | | ||
| | Methods | Load all images at once using `loadAll()` | [Code](demos/load_all.html) | [Live](https://verlok.github.io/vanilla-lazyload/demos/load_all.html) | | ||
| | Test | Test for multiple thresholds | [Code](demos/thresholds.html) | [Live](https://verlok.github.io/vanilla-lazyload/demos/thresholds.html) | | ||
| | Test | Test behaviour with hidden images | [Code](demos/image_hidden.html) | [Live](https://verlok.github.io/vanilla-lazyload/demos/image_hidden.html) | | ||
| | Test | Test performance, lazy loading of hundreds of images | [Code](demos/hundreds.html) | [Live](https://verlok.github.io/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://verlok.github.io/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://verlok.github.io/vanilla-lazyload/demos/native_lazyload_conditional.html) | | ||
@@ -667,3 +667,3 @@ --- | ||
| You can find more details and demos in my article [aspect-ratio: A modern way to reserve space for images and async content in responsive design](https://www.andreaverlicchi.eu/aspect-ratio-modern-reserve-space-lazy-images-async-content-responsive-design/). | ||
| You can find more details and demos in my article [aspect-ratio: A modern way to reserve space for images and async content in responsive design](https://www.andreaverlicchi.eu/blog/aspect-ratio-modern-reserve-space-lazy-images-async-content-responsive-design/). | ||
@@ -670,0 +670,0 @@ --- |
No alert changes
Worsened metrics
- Total package byte prevSize
- decreased by-0.13%
218694
No dependency changes