Lazy-Load Images With the Intersection Observer

Speed everything up with images that load efficiently

Last year, I tried to focus more and more on the performance of websites and web apps. It’s quite a challenge in the world of all the big frameworks and libraries.

Hopefully, you know that loading images can cost even more time and data. But luckily, there is a technique called lazy-loading images.

Loading Images

Loading images with the normal <img> tag lets the browser wait until all of the images are loaded.

<img src="https://loadyourimages.nl/image-nam.jpg" src="This is my awesome image">

Especially if you have a website with a lot of images, it can take up to ten seconds before the user has an interactive page.

On mobile connections that can be even worse. With bad or slow connections, your user will sometimes wait for tens of seconds or even minutes.

But we all know that those users don’t want to wait that long. They will leave after a few seconds!

Lazy-Loading Images

We want our pages loaded as fast as possible. Our goal should be zero to five seconds, this is the amount of time a user will be patient for the page to load.

So, if we avoid the normal <img src="url">, our pages will load a lot faster.

If we use a data-attribute to put in the URL of the image, we can put it in the src attribute to load them when it’s in the viewport.

Most developers will use libraries for lazy-loading which use an eventListener on the scroll event to check if an element is in the viewport. But we need something better since the eventListener on the scroll is kind of heavy on some devices.

Intersection Observer

The Intersection Observer does a pretty good job of detecting if a certain element is inside the visible part…