How to Load an Image Asynchronously with JavaScript

Last Updated on March 4, 2026 by Laura Coronel

Sometimes you want images to load quietly in the background instead of appearing progressively on the page. This is common in image galleries, games, and interfaces where you want to control when an image appears—only after it has fully downloaded.

JavaScript makes this easy by allowing you to preload images asynchronously and swap them into the page once they’re ready.

In this article, you’ll learn a simple, reliable pattern for loading images asynchronously using JavaScript.

Overview

The basic process for loading an image asynchronously looks like this:

1. Create a new Image object in JavaScript
2. Assign a URL to its src attribute to start downloading
3. Listen for the load event
4. Replace the visible image once loading completes

This approach works in all modern browsers and doesn’t require any external libraries.

Setup

1. HTML

Start with an <img> element that acts as the destination for your final image.

<img id="mainImage" src="placeholder.png" alt="Loading image">

The placeholder image can be:

• A transparent image
• A low-resolution preview
• Or a neutral placeholder graphic

This prevents broken-image icons while the real image loads.

2. CSS

You can optionally show a loading indicator using CSS.

img {
  width: 600px;
  height: 450px;
  background: url("loading.gif") center no-repeat;
  border: 1px solid #000;
  border-radius: 5px;
}

This keeps the layout stable and gives users visual feedback while the image downloads.

Loading an Image with JavaScript

First, get a reference to the destination image element.

const image = document.getElementById("mainImage");

Next, create a new Image object. This image will load in memory without affecting the page.

const downloadingImage = new Image();

Before assigning a source, attach a load event handler. This ensures the image is fully downloaded before it’s displayed.

downloadingImage.onload = () => {
  image.src = downloadingImage.src;
};

Finally, assign the image URL to start the download.

downloadingImage.src = "https://example.com/high-resolution-image.jpg";

Once the download completes, the onload handler fires and updates the visible image instantly.

Complete Example

const image = document.getElementById("mainImage");
const downloadingImage = new Image();

downloadingImage.onload = () => {
  image.src = downloadingImage.src;
};

downloadingImage.src = "https://example.com/high-resolution-image.jpg";

That’s all you need to preload and display an image asynchronously.

Handling Errors

You can also listen for loading errors to handle missing or unreachable images gracefully.

downloadingImage.onerror = () => {
  console.error("Failed to load image.");
};

This is especially useful when loading images from external sources.

When to Use This Pattern

Asynchronous image loading is useful when:

• You want to avoid partially rendered images
• You’re loading large or high-resolution assets
• You need precise control over when images appear
• You’re building galleries, slideshows, or games

For simple pages, the browser’s native image loading is often enough. Use JavaScript loading as a progressive enhancement, not a requirement.

Final Thoughts

Loading images asynchronously with JavaScript gives you more control over performance and user experience. By preloading images in memory and displaying them only when they’re ready, you can create smoother, more polished interfaces without complex code.

As always, design your pages so they work without JavaScript first, then layer this technique on top for better performance and polish.