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

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

But why?

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

Integration with a framework

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

<!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

Cherries 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