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

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

Last month I published a blog post in which I tried to demonstrate how to create a Web Component to lazy load images using Intersection Observer and it turned out afterwards, that I actually had to use my own medicine several times while developing DeckDeckGo, our upcoming open source editor for presentations.

That’s why we are happy to publish on npm today a new dead simple open source Web Component, developed with StencilJS, to lazy load images in any modern web projects regardless of which framework (or none) you are using 😃

But why?

But why another Web Component to lazy load images?

You may ask yourself why we had to develop and publish a new Web Component to lazy load images when it’s so easy to just write a couple of lines of Javascript, using the Intersection Observer API, to already have images supporting lazy loading 🤔

In fact, as I said before, we are developing an open source web editor for presentations build with Web Components. To save your edited data, the slides of your presentations, we have to save the (HTML) content into the database. As we are developing our tool for speed, all components and notably images have to…