Lazy Loading Images

Why lazy load in the first place

When somebody visits your site, they have to download all the files used on the current page, and this includes the images. Now images usually aren't small in size and not everyone has a reliable connection. So if your page has a lot of images, it can really slow down that initial load, leaving the person looking at blank white screen until it's done.

Lazy Loading

One way to deal with this is to delay loading the images that aren't visible immediately, also called lazy loading. Maybe you have to scroll down a bit to get to them, or you have a carousel and only the first picture is displayed. Doing this will make that initial page load much quicker.

I've also included a demo at the end that shows one example where lazy loading is used.

So how does it work

It's actually very simple, it goes through these four steps:

1. Set the dimensions of the picture
2. Store the link for later as an html attribute
3. Wait for a trigger event (maybe the user is scrolling and the image enters into view)
4. Displaying the image

So let's go through each step in detail

Setting the dimensions

Now somebody might ask, why do this?

The reason is that when you insert an image the content on the page "makes a jump", or rather moves to make space for the image.

This doesn't look very aesthetically pleasing, to prevent it from happening we just set an empty img element with the same dimensions as the image. Then when the image loads it already has some free space and the rest of the content doesn't move.

So where do you get the dimensions?

If you're hard-coding the images being displayed then you probably have the dimensions and hard-code them too.

What's more likely to happen is that you get the links for image from an API call to some server. And it's standard practice to send the dimensions alongside with the links. So when you get the links just set the dimensions with JS.

Storing the link for later

There's a special type of HTML attributes called data attributes. They all begin with data- This how they look in HTML:

<span id="getThis" data-author="Dave">Some text</span>

And this is how you access them in JS:

var spanNode = document.querySelector("#getThis");
var author = spanNode.dataset.author;
console.log(author); // Prints "Dave" to console

The trigger event

This on will depend on the context.

Is this an image on the page that the user has to scroll to to see. Then the trigger is image entering into view. (There are demos showing how to do this at the end of the post)

Is the image in a carousel, then maybe you load ones that are next to the current image being displayed.

Does the image get shown only when you click a button or something else. Then that's your trigger.

Displaying the image

To do this just take the stored link and set src attribute on the image to that link.

Demo

Wow you read through all that, congrats. Or maybe you just skipped it, either way here's how to do the scrolling example:

Alongside articles here on dev.to I also post short, visual explanations about same topics on my instagram so if you're interested in that here's a post about this article: https://www.instagram.com/p/B6k7krBlAmT/