While lazy loading is hailed as a game-changer in optimizing web performance, not all implementations are created equal. Traditional lazy loaders may inadvertently delay crucial content, leading to detrimental effects on your site's Largest Contentful Paint (LCP). Read more about this and about the Largest Contentful Paint (LCP).
This library allows you to lazyload images, videos, and background images using the Intersection Observer API and the MutationObserver API in order to check when an element is in view. What differs with the common lazy loading implementation is that it doesn't require markup, it's very lightweight and fast to load, remaining full-featured and easy to use.
Add the script just after the body tag.
<html>
<head>...</head>
<body>
<script src="https://unpkg.com/auto-lazyload"></script>
... the rest of your code ...
</body>
</html>
...install the library with npm install auto-lazyload or yarn add auto-lazyload.
Then import the library with:
<html>
<head>...</head>
<body>
<script type="module">
import AutoLazyLoad from 'auto-lazyload';
AutoLazyLoad({
on: 'lazy',
loading: 'lazy-loading',
failed: 'lazy-failed',
loaded: 'lazy-loaded',
attribute: 'data-lazy',
nativeSupport: false,
fetchprioritySupport: true
});
</script>
... the rest of your code ...
</body>
</html>
...If needed, you have the flexibility to customize the lazy loading behavior by setting the lazyloadOptions object in the window object before the document is loaded. This allows you to override the default options to tailor lazy loading according to your specific requirements.
window.autolazy = {
on: 'my-lazy', // the class name for the active lazy loaded image
loading: 'my-lazy-loading', // the class name for the lazy loading image
failed: 'my-lazy-failed', // the class name for the failed image
loaded: 'my-lazy-loaded', // the class name for the lazy loaded image
attribute: 'data-lazy', // the dataset name for the lazy loaded image (used internally but configurable)
nativeSupport: false, // whether to use the native lazyload (e.g. loading="lazy") or not
fetchprioritySupport: true, // whether to add the fetchpriority attribute to the page head or not
// The intersectionObserverOptions can also be set here
// https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver#instance_properties
selector: {
root: null,
rootMargin: "0px 0px 0px 0px",
threshold: 0
},
};- Observer The intersection observer instance.
const observer = autolazy.observer;
// Example:
observer.rootMargin = "0px 0px 0px 0px";
observer.threshold = 0;
observer.observe(document.querySelector(".target"));
observer.unobserve(document.querySelector(".target"));
observer.disconnect();- Unmount Destroy the library and remove the event listeners.
autolazy.unmount()
- Update a target Element Update the options for the specified target.
autolazy.update(".target")
- Update Update the options for all targets.
autolazy.update()
- Watch Add the specified target to the watch list.
autolazy.watch(document.querySelector(".target"))
- Unveil Show the specified target.
autolazy.unveil(document.querySelector(".target"))
- Skip auto lazy load
You can avoid the auto lazy load by adding the no-lazy class to the target element.
<img class="no-lazy" src="https://example.com/image.jpg" alt="this image is not lazyloaded" />- Disable the fetchpriority attribute
While the fetchPrioritySupport option is enabled by default, and it is recommended to keep it active, this can conflict with other plugins.
If you need to disable it, this is possible by setting the fetchPrioritySupport option to false before the script is loaded.
window.autolazy = {fetchPrioritySupport: false};- The script is designed to work in modern browsers that support both Intersection Observer and Mutation Observer APIs.
- If the
IntersectionObserverAPI is not supported, the page will be loaded without lazy loading images but nothing else.
See CONTRIBUTING.md
MIT
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent