DEV Community 👩‍💻👨‍💻

Cover image for Lazy Loading Images
Milan Radojević
Milan Radojević

Posted on

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>
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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/

Top comments (6)

Collapse
 
hozefaj profile image
Hozefa

Hoping that all browsers implement the attribute lazy for img tag. Chrome has implemented it. I hope other browsers follow suit soon.

This is one common use case where it should be handled natively by the browser vendors. There are tons of duplication and reinventing the wheel here for everyone to solve for this.

Collapse
 
mikister profile image
Milan Radojević

It's actually first time I heard about Chrome doing this. Thanks for sharing man.

Collapse
 
hozefaj profile image
Hozefa
Collapse
 
kpowroznik profile image
Kamil Powroźnik

For that case, Intersection Observer API will be good option instead listener for scroll events :)

Collapse
 
mikister profile image
Milan Radojević

Yes, it would be a much better choice for this, but currently it's still an experimental feature. It's still in the draft stage with W3C as far as I know. But I can't wait to see how it'll turn out. Have you used it recently maybe?

Collapse
 
kpowroznik profile image
Kamil Powroźnik

Yeah, I used it. The most important thing is that we can easily extend observer for more elements without duplication of logic :)

Regex for lazy developers

regex for lazy devs

You know who you are. Sorry for the callout 😆