auto-lazyload
Advanced tools
A lazy loading library for images, background, videos, Didn't require to change the HTML markup, just works and the performance is amazing!
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
},
};
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();
autolazy.unmount()
autolazy.update(".target")
autolazy.update()
autolazy.watch(document.querySelector(".target"))
autolazy.unveil(document.querySelector(".target"))
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" />
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};
IntersectionObserver API is not supported, the page will be loaded without lazy loading images but nothing else.See CONTRIBUTING.md
MIT
FAQs
A lazy loading library for images, background, videos, Didn't require to change the HTML markup, just works and the performance is amazing!
The npm package auto-lazyload receives a total of 63 weekly downloads. As such, auto-lazyload popularity was classified as not popular.
We found that auto-lazyload demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.
Research
Security News
A threat actor's playbook for exploiting the npm ecosystem was exposed on the dark web, detailing how to build a blockchain-powered botnet.
Security News
NVD’s backlog surpasses 20,000 CVEs as analysis slows and NIST announces new system updates to address ongoing delays.