fast-lazyload
Advanced tools
A fast lazyload library that use the intersection observer API and the mutation observer to lazyload images, background images and videos at the speed of light.
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).
The script operates at the core of your webpage's creation process, thanks to the vigilant watch of the Mutation Observer API. It meticulously observes every addition to the DOM, ensuring that when an element, be it an image or video, is appended, it comes complete with its source set. By sidestepping proxies and preemptively loading content with its true source, we safeguard your site's Largest Contentful Paint (LCP) metrics. This proactive approach not only optimizes loading times but also guarantees a seamless user experience from the moment your page springs to life.
high for the images and videos inside the viewport automatically (ref.).<body> tag in your HTML document.<body>
<script src="https://www.unpkg.com/fast-lazyload"></script>
...
</body>
To get started, add the data-lazy attribute to any element you want to lazy load.
The library will check for the existence of a style attribute with a background image.
If it does not exist, it will assume the element that requires lazy loading adding or replacing the src.
<!-- Image -->
<img src="proxy.jpg" data-lazy="original.png" data-srcset="[original srcset]" width="960" height="540" />
<!-- Background image -->
<div style="background-image:url(proxy.jpg); width: 960px; height: 540px" data-lazy="original.png"></div>
<!-- Video -->
<video autoplay muted data-lazy="original.mp4" style="background-image:url(proxy.jpg); width: 960px; height: 540px"></video>
<!-- Audio -->
<audio data-lazy="original.mp3"></audio>
<!-- Script -->
<script data-lazy="myHeavyScript.js"></script>
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.lazyloadOptions = {
loading: 'my-lazy-loading',
failed: 'my-lazy-failed',
on: 'my-lazy',
loaded: 'my-lazy-loaded',
attribute: 'data-lazy'
};
If no custom options are provided, the script will fall back to the default options:
const Options = {
loading: 'lazy-loading',
failed: 'lazy-failed',
on: 'lazy',
loaded: 'lazy-loaded',
attribute: 'data-lazy'
};
Integrating animations with lazy loaded items can significantly enhance the visual appeal and user engagement of your website.
lazy and loading are added to indicate visibility and loading.Options.loaded is added, and Options.loading is removed and the data-lazy attribute is removed too.Options.failed is added.Options.on and Options.loading are removed.img.lazy {
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
img.lazy.loaded {
opacity: 1;
animation: blink 0.5s ease-in-out;
}
video.lazy.loading {
background-image: url("spinner.gif");
}
audio.lazy.failed {
background-image: url("404.jpg");
}
data-lazy attribute, which are considered lazy-loadable elements.data-lazy attribute on elements you intend to load lazily.background-image:url(proxy.jpg);) otherwise will be considered as a src replacementIf you encounter any issues or have suggestions for improvements, feel free to contribute by submitting a pull request or opening an issue on the GitHub repository.
This script is licensed under the MIT License. You are free to modify and distribute it as per the terms of the license.
Special thanks to the developers and contributors of Intersection Observer and Mutation Observer APIs for enabling efficient lazy loading techniques.
FAQs
A fast lazyload library that use the intersection observer API and the mutation observer to lazyload images, background images and videos at the speed of light.
We found that fast-lazyload demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer 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.
Company News
Socket won two 2026 Reppy Awards from RepVue, ranking in the top 5% of all sales orgs. AE Alexandra Lister shares what it's like to grow a sales career here.
Security News
NIST will stop enriching most CVEs under a new risk-based model, narrowing the NVD's scope as vulnerability submissions continue to surge.
Company News
/Security News
Socket is an initial recipient of OpenAI's Cybersecurity Grant Program, which commits $10M in API credits to defenders securing open source software.