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

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();

Written by

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