Image Lazy Loading

By  on  

Lazy loading images is a practice that's been popular for a decade and for good reason: images are usually the heaviest downloads on a given webpage and avoiding unloading images that are never seen saves the user bandwidth. There are plugins for lazy loading images in every JavaScript framework, or you could use Intersection Observer API, but it's become such a common practice that there should probably be a browser API to accommodate it...and Chrome is implementing just that. Let's have a look at how the incoming native lazy loading API will work!

This new lazy loading API come down to a simple loading="lazy" attribute and value on img tags:

<img src="path/to/logo.png" loading="lazy">

To experiment with this new API, you can add an onLoad attribute to the image:

<img src="path/to/logo.png" loading="lazy"  onload="alert('Loaded!');">

When the user scrolls within range of the image, the download and render is triggered. There are three values for this attribute:

  • auto - the default behavior for image loading today
  • lazy - loads the image when it becomes visible based on scroll position
  • eager - loads the image immediately regardless of scroll position

Have a look at this demo of loading="lazy":

See the Pen jOOoLXO by David Walsh (@darkwing) on CodePen.

Adding a native API for an ages old pattern is something I'm excited about -- it reminds me of the MooTools days which triggered the HTML5 revolution of adding what we know we've needed forever. What are your thoughts on this new implementation?

Recent Features

  • By
    How to Create a RetroPie on Raspberry Pi &#8211; Graphical Guide

    Today we get to play amazing games on our super powered game consoles, PCs, VR headsets, and even mobile devices.  While I enjoy playing new games these days, I do long for the retro gaming systems I had when I was a kid: the original Nintendo...

  • By
    CSS Gradients

    With CSS border-radius, I showed you how CSS can bridge the gap between design and development by adding rounded corners to elements.  CSS gradients are another step in that direction.  Now that CSS gradients are supported in Internet Explorer 8+, Firefox, Safari, and Chrome...

Incredible Demos

  • By
    Create a Simple News Scroller Using Dojo

    My journey into Dojo JavaScript has been exciting and I'm continuing to learn more as I port MooTools scripts to Dojo. My latest experiment is porting a simple new scroller from MooTools to Dojo. The code is very similar! The HTML The news items...

  • By
    Image Data URIs with PHP

    If you troll page markup like me, you've no doubt seen the use of data URI's within image src attributes. Instead of providing a traditional address to the image, the image file data is base64-encoded and stuffed within the src attribute. Doing so saves...

Discussion

  1. Jenny

    What’s the browser support for this? It worked in Chrome for me but FF fired the alert on page load.

  2. Emre Çamaşuvi

    If this link is opened in a new tab that I didn’t browse yet, it shows “alert” anyway.
    Does that mean it’s loaded non-lazily since I didn’t see the image at all.

    • dmitrizzle

      Browsers which don’t support it fall back to loading everything, as they do with the basic tag. The proposal is actually still work in progress; because, in my case, image assets cost money I, can’t use it just yet. But super excited about it!

      MooTools… I miss this framework!

  3. Looks awesome feature, I’ll surely try this, hope Safari will have this soon too. Do you know when Firefox is having this feature? or they already implemented it?

    • Sebastian Zartner

      > Do you know when Firefox is having this feature? or they already implemented it?

      See my comment a few lines above.

    • Thanks Sebastian, sorry didn’t noticed that comment, that’s helpful :)

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!