LearnLearn How: Asynchronous Image Loading with JavaScript

Andrew Chalkley
writes on May 20, 2015

There may come a time where you want to download an image in the background instead of seeing it load like this…

…have it load like this:

Overview

Maybe you’ve got an image gallery with high-resolution images or you have a game with lots of image assets. Either way the process is the same.

  1. Create an Image programmatically with JavaScript
  2. Assign a URL to the src attribute of the new image
  3. Create a handler for the onload attribute, this will be triggered once the image is downloaded

Setup

The HTML

The HTML is straight forward.

<img src="clear.gif">

I’m using a gif with 1 clear pixel that gets stretched over the whole image tag. If you don’t use an image you’ll get a “missing/broken image” icon like this:

You could alternatively use a low-resolution version of the image you’ll eventually show and when the high-resolution, high-quality image downloads you can swap it out.

The CSS

In my example, I’ve included some CSS that will add a loading.gif in the background of destination image tag.

Here’s the CSS I used.

img {
  width: 600px;
  height: 450px;
  background: url(loading.gif) 50% no-repeat;
  border: 1px solid black;
  border-radius: 5px;
}

This will center the loading.gif into the middle of the destination image.

The JavaScript

Firstly you want to get the image tag you want to eventually populate.

In my case, it’s the first image on the page.

var image = document.images[0];

Then I need to create an image programmatically.

var downloadingImage = new Image();

Once you set the src attribute on this image downloading will start, so before that we want to create a handler for the onload event. Once the image has been downloaded this will trigger.

downloadingImage.onload = function(){

};

Then we want to set the destination image source to the downloadingImage source, in other words, this source.

downloadingImage.onload = function(){
    image.src = this.src;   
};

Finally, we want to set the downloadingImage‘s source.

downloadingImage.src = "http://an.image/to/aynchrounously/download.jpg";

The image will start downloading in the background immediately. Once the download is complete the onload callback will be triggered and the destination’s source will be that of the newly downloaded image.

And you’re done!

Here’s the complete JavaScript code:

var image = document.images[0];
var downloadingImage = new Image();
downloadingImage.onload = function(){
    image.src = this.src;   
};
downloadingImage.src = "http://an.image/to/aynchrounously/download.jpg";

Final Thoughts

This was a technical overview on how to download an image in the background (asynchronously) with JavaScript in the browser. As with all JavaScript applications, you should use JavaScript code to progressively enhance your site. Making sure that your application gracefully degrades is always a consideration.

13 Responses to “Learn How: Asynchronous Image Loading with JavaScript”

  1. Hi, thank you for the tutorial, but i have another related issue :
    with a button or link in the top, how can i download all the images locally using javascript ?
    Thanks a lot

  2. How would you do that to fetch multiple images asynchronously?

  3. Thank you really helpful post

  4. abraham on March 29, 2016 at 1:42 pm said:

    I use this css class to fade images in on load

    .fade-in-on-load {animation-duration: 2.3s; animation-name: fadeInOnLoad;}
    @keyframes fadeInOnLoad {
    0%,50% {opacity: 0;}
    100% {opacity: 1;}
    }

  5. Very helpful tutorial indeed. I’m looking forward to convert it for WordPress. 🙂

  6. I have some problem with the shadow domes element with the class alttext-container. It shows with a border and cant change the styles for it.

  7. A real example of how to apply it, would have been awesome.

  8. Thanks very much for this help; it was just what I needed. I learned HTML in the 90s and javascript and css are new worlds for me. This tutorial has helped me learn in general, and solve a specific use case on my site.

  9. very good on May 27, 2015 at 4:21 am said:

    good tutorial

  10. Thank you for awesome tip but I have a question. Is it effect image SEO or not?

  11. Good post, but not applicable in many cases.

  12. This is a really helpful post. Will it help me improve google page speed score?

    Have A Nice Day Buddy

  13. Really helpful post. Thank you.

Leave a Reply

Want to learn more about Javascript?

Learn how to use JavaScript to add interactivity to websites.

Learn more