Skip to content

Commit 8687059

Browse files
verlokverlok
committed
Added 1 row in comparison vs lazySizes
1 parent 2004763 commit 8687059

File tree

1 file changed

+22
-21
lines changed

1 file changed

+22
-21
lines changed

‎README.md

Lines changed: 22 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -193,7 +193,7 @@ OR, if you prefer to import it as an ES module:
193193

194194
```html
195195
<script type="module">
196-
import LazyLoad from 'https://cdn.jsdelivr.net/npm/[email protected]/+esm'
196+
import LazyLoad from "https://cdn.jsdelivr.net/npm/[email protected]/+esm";
197197
</script>
198198
```
199199

@@ -205,7 +205,7 @@ var lazyLoadInstance = new LazyLoad({
205205
});
206206
```
207207

208-
To be sure that DOM for your lazy content is ready when you instantiate LazyLoad, **place the script tag right before the closing `</body>` tag**.
208+
To be sure that DOM for your lazy content is ready when you instantiate LazyLoad, **place the script tag right before the closing `</body>` tag**.
209209

210210
If more DOM arrives later, e.g. via an AJAX call, you'll need to call `lazyLoadInstance.update();` to make LazyLoad check the DOM again.
211211

@@ -605,8 +605,8 @@ Didn't find the [recipe](#-recipes) that exactly matches your case? We have demo
605605

606606
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.
607607

608-
| Type | Title | Code | Demo |
609-
| --------- | ---------------------------------------------------------------------------------------------- | ---------------------------------------------- | ---------------------------------------------------------------------------------------------- |
608+
| Type | Title | Code | Demo |
609+
| --------- | ---------------------------------------------------------------------------------------------- | ---------------------------------------------- | ---------------------------------------------------------------------------------------- |
610610
| 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) |
611611
| 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) |
612612
| 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) |
@@ -781,23 +781,24 @@ A list of all vanilla-lazyload features, compared with other popular lazy loadin
781781

782782
### vanilla-lazyload VS lazysizes
783783

784-
| It | vanilla-lazyload | lazysizes |
785-
| ---------------------------------------------------------------------------------------- | ---------------- | ----------- |
786-
| Is lightweight | ✔ (2.8 kB) | ✔ (3.4 kB) |
787-
| Is extendable | ✔ (API) | ✔ (plugins) |
788-
| Is SEO friendly | ✔ | ✔ |
789-
| Optimizes performance by cancelling downloads of images that already exited the viewport | ✔ | |
790-
| Retries loading after network connection went off and on again | ✔ | |
791-
| Supports conditional usage of native lazyloading | ✔ | |
792-
| Works with your DOM, your own classes and data-attributes | ✔ | |
793-
| Can lazyload responsive images | ✔ | ✔ |
794-
| ...and automatically calculate the value of the `sizes` attribute | | ✔ |
795-
| Can lazyload iframes | ✔ | ✔ |
796-
| Can lazyload animated SVGs | ✔ | |
797-
| Can lazyload videos | ✔ | |
798-
| Can lazyload background images | ✔ | |
799-
| Can lazily execute code, when given elements enter the viewport | ✔ | |
800-
| Can restore DOM to its original state | ✔ | |
784+
| It | vanilla-lazyload | lazysizes |
785+
| ------------------------------------------------------------------------------------------------------------------------ | ---------------- | ----------- |
786+
| Is lightweight | ✔ (2.8 kB) | ✔ (3.4 kB) |
787+
| Is extendable | ✔ (API) | ✔ (plugins) |
788+
| Is SEO friendly | ✔ | ✔ |
789+
| Optimized for INP (uses `IntersectionObserver` instead of [these]https://gist.github.com/paulirish/5d52fb081b3570c81e3a) | ✔ | |
790+
| Optimizes performance by cancelling downloads of images that already exited the viewport | ✔ | |
791+
| Retries loading after network connection went off and on again | ✔ | |
792+
| Supports conditional usage of native lazyloading | ✔ | |
793+
| Works with your DOM, your own classes and data-attributes | ✔ | |
794+
| Can lazyload responsive images | ✔ | ✔ |
795+
| ...and automatically calculate the value of the `sizes` attribute | | ✔ |
796+
| Can lazyload iframes | ✔ | ✔ |
797+
| Can lazyload animated SVGs | ✔ | |
798+
| Can lazyload videos | ✔ | |
799+
| Can lazyload background images | ✔ | |
800+
| Can lazily execute code, when given elements enter the viewport | ✔ | |
801+
| Can restore DOM to its original state | ✔ | |
801802

802803
Weights source: [bundlephobia](https://bundlephobia.com/). Find others table rows explanation below.
803804

0 commit comments

Comments
 (0)