DEV Community

Cover image for Ezlazy: A Lightweight Lazy Loading Library for Images & Backgrounds
Pooya Goodarzi
Pooya Goodarzi

Posted on

Ezlazy: A Lightweight Lazy Loading Library for Images & Backgrounds

#javascript #webdev #programming #tutorial

Have you ever opened a webpage and tried to load 100 images at once ? yea, right not fun ! That is why I decided to create ezlazy.
It's minimal attribute based library to lazy-load images on infinite scroll using the Intersection Observer.

*What it does ? *

  • It's attribute based so you just need to work it in HTML and won't be needing any js.

  • Automatically uses the Intersection Observer if available in browsers, fallback otherwise

  • Tiny footprint and dependency free

Quick Start

Just add the CDN and you are ready to go !
Note : You can also install the package using npm i ezlazy
(after installing be sure to import it in your main js file import 'ezlazy';)

<img data-ezlazy="my-photo.jpg" alt="Lazy photo">

<script src="https://unpkg.com/ezlazy@latest/dist/ezlazy.min.js"></script>
Enter fullscreen mode Exit fullscreen mode

That's it and the image will be loading when close to entering viewport.

Links
🔗 GitHub: [https://github.com/Redskullvue/ezlazy]
📦 NPM: [https://www.npmjs.com/package/ezlazy?activeTab=readme]

Give it a try in your next project and let me know your feedback. Contributions and stars are always welcome ⭐️.

Top comments (0)