vanilla-lazyload
Advanced tools
vanilla-lazyload - npm Package Compare versions
Comparing version 17.1.0 to 17.1.1
@@ -5,2 +5,6 @@ # CHANGELOG | ||
| #### 17.1.1 | ||
| - Fixing npm audit vulnerabilities | ||
| #### 17.1.0 | ||
@@ -7,0 +11,0 @@ |
| { | ||
| "name": "vanilla-lazyload", | ||
| "version": "17.1.0", | ||
| "version": "17.1.1", | ||
| "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.", | ||
@@ -18,3 +18,3 @@ "main": "dist/lazyload.min.js", | ||
| "rollup-plugin-babel": "^4.4.0", | ||
| "rollup-plugin-terser": "^5.3.0" | ||
| "rollup-plugin-terser": "^7.0.0" | ||
| }, | ||
@@ -21,0 +21,0 @@ "scripts": { |
@@ -22,3 +22,7 @@ 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. | ||
| ```html | ||
| <img alt="A lazy image" data-src="lazy.jpg" /> | ||
| <img | ||
| alt="A lazy image" | ||
| class="lazy" | ||
| data-src="lazy.jpg" | ||
| /> | ||
| ``` | ||
@@ -31,2 +35,3 @@ | ||
| alt="A lazy image" | ||
| class="lazy" | ||
| src="lazy-lowQuality.jpg" | ||
@@ -106,3 +111,6 @@ data-src="lazy.jpg" | ||
| ```html | ||
| <div class="lazy" data-bg="lazy.jpg"></div> | ||
| <div | ||
| class="lazy" | ||
| data-bg="lazy.jpg"> | ||
| </div> | ||
| ``` | ||
@@ -174,3 +182,6 @@ | ||
| ```html | ||
| <iframe class="lazy" data-src="lazyFrame.html"></iframe> | ||
| <iframe | ||
| class="lazy" | ||
| data-src="lazyFrame.html"> | ||
| </iframe> | ||
| ``` | ||
@@ -186,3 +197,3 @@ | ||
| The latest, recommended version of LazyLoad is **17.1.0**. | ||
| The latest, recommended version of LazyLoad is **17.1.1**. | ||
@@ -204,3 +215,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.1.0/dist/lazyload.min.js"></script> | ||
| <script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@17.1.1/dist/lazyload.min.js"></script> | ||
| ``` | ||
@@ -212,3 +223,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@17.1.0/dist/lazyload.min.js"></script> | ||
| <script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@17.1.1/dist/lazyload.min.js"></script> | ||
| ``` | ||
@@ -245,3 +256,3 @@ | ||
| ```js | ||
| var lazyLoadAmdUrl = "https://cdn.jsdelivr.net/npm/vanilla-lazyload@17.1.0/dist/lazyload.amd.min.js"; | ||
| var lazyLoadAmdUrl = "https://cdn.jsdelivr.net/npm/vanilla-lazyload@17.1.1/dist/lazyload.amd.min.js"; | ||
| var polyfillAmdUrl = "https://cdn.jsdelivr.net/npm/intersection-observer-amd@2.0.1/intersection-observer-amd.js"; | ||
@@ -291,3 +302,3 @@ | ||
| async | ||
| src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@17.1.0/dist/lazyload.min.js" | ||
| src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@17.1.1/dist/lazyload.min.js" | ||
| ></script> | ||
@@ -326,3 +337,3 @@ ``` | ||
| async | ||
| src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@17.1.0/dist/lazyload.min.js" | ||
| src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@17.1.1/dist/lazyload.min.js" | ||
| ></script> | ||
@@ -461,3 +472,3 @@ ``` | ||
| ```html | ||
| <div class="scrollingPanel" id="scrollingPanel"> | ||
| <div class="scrollingPanel"> | ||
| <!-- Set of images --> | ||
@@ -471,3 +482,3 @@ </div> | ||
| var myLazyLoad = new LazyLoad({ | ||
| container: document.getElementById("scrollingPanel") | ||
| container: document.querySelector(".scrollingPanel") | ||
| }); | ||
@@ -474,0 +485,0 @@ ``` |
Improved metrics
- Total package byte prevSize
- increased by0.04%
217287
- Number of lines in readme file
- increased by1.26%
886