A new dead simple open source Web Component to lazy load images

Image for post
Image for post
A lazy good girl or boy. Photo by Brianna Santellan on Unsplash

But why?

Image for post
Image for post
But why another Web Component to lazy load images?
Image for post
Image for post
Funny gifs but it took us actually three days to figure out what was the solution 😂

Integration with a framework

You could install our component in your project using the following npm command:

npm i @deckdeckgo/lazy-img --save
<deckgo-lazy-img
img-src="/assets/img/your_image.png"
img-alt="My lazy loaded image">
</deckgo-lazy-img>

Integration without a framework

Our component could also be use in any projects where no framework would be use. For that purpose you would just use the component from a CDN, like for example from Unpkg, and then consume it like displayed above.

<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://unpkg.com/@deckdeckgo/lazy-img@latest/dist/deckdeckgo-lazy-img.js"></script>
</head>
<body>
<deckgo-lazy-img
img-src="/assets/img/your_image.png"
img-alt="My lazy loaded image">
</deckgo-lazy-img>
</body>
</html>

Responsiveness

Once this small blog post was published, I received a couple of feedbacks and notably one from Alex Russell who had the idea to introduce the support for responsive images with the use of attributes srcset and sizes . Of course I thought it was an awesome idea and therefore I already implemented it and published it to npm 🤪

Cherries on the cake 🍒🎂

For once in my small blog posts, there are more than just one cherry on the cake 😉

const element = document.querySelector('deckgo-lazy-img');
await element.lazyLoad();

Freelancer by day | Creator of DeckDeckGo by night | Organizer of the Ionic and IndieHackers Zürich Meetup

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store