This repository has been archived by the owner on Dec 11, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
1 changed file
with
19 additions
and
15 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,27 +1,31 @@ | ||
| # Lazily.js | ||
| A lazy loader for lazy folks. | ||
| Inspired by [this tutorial](https://shiftbacktick.io/code/2019/08/17/lazily-lazy-loading.html). | ||
|
|
||
| This library leverages a `MutationObserver` to detect when elements are added to the DOM. | ||
| This library leverages a `MutationObserver` to detect when its target elements are added to the DOM. | ||
| If the native `loading` attribute is supported, then it is applied. | ||
| Otherwise an `IntersectionObserver` is used to load elements as needed. | ||
| Otherwise an `IntersectionObserver` is used to load them as needed. | ||
|
|
||
| ## Browser compatibility | ||
| ## Compatibility | ||
| - Compatible with all evergreen browsers | ||
| - For IE11 compatibility, please provide polyfills for `IntersectionObserver` and `MutationObserver` | ||
| - Otherwise encourage your users to dump their outdated browsers | ||
| - For IE11, please provide polyfills for `IntersectionObserver` and `MutationObserver` | ||
| - Earlier browsers may require transpilation and additional polyfills | ||
|
|
||
| ## Standard usage | ||
| Simply add the minified script to the document `<head>`: | ||
| ## Usage | ||
| Simply add the minified script to the document `<head>`. | ||
| For certain setups, it may be advantageous to include it inline: | ||
|
|
||
| ```html | ||
| <script src=".../dist/Lazily.min.js"></script> | ||
| <head> | ||
| <script src=".../dist/Lazily.min.js"></script> | ||
| </head> | ||
| ``` | ||
|
|
||
| For certain setups, it may be advantageous to include it inline. | ||
| No other markup changes are required. | ||
| It will automatically lazy load `<iframe>`, `<img>`, `<picture>`, and `<video>` elements in supported browsers. | ||
|
|
||
| ### API | ||
| - `Lazily.forceLoad()` - Forces all observed elements to load. | ||
| - `Lazily.isSupported()` - Returns `true` if the library is working. | ||
|
|
||
| ## Next steps | ||
| - JSDoc comment blocks | ||
| - Contribution guidelines | ||
| - Integrations tests | ||
| - Uglification build step within the `dist/` directory | ||
| ## Credits | ||
| Inspired by [this tutorial](https://shiftbacktick.io/code/2019/08/17/lazily-lazy-loading.html). |