How to Preload Images in JavaScript?

Preloading images in JavaScript allows you to ensure that all necessary images are fully loaded and ready to use before they are displayed on a page. Here’s an example of how to preload an image in JavaScript:

var image = new Image();
image.src = "image.jpg";

image.onload = function() {
  // do something with the image
};

In the above code, we create a new Image object and set its src property to the URL of the image that we want to preload. The onload event is triggered when the image has finished loading, and we can use this event to perform some action with the image, such as displaying it on the page.

If you want to preload multiple images, you can use a loop to create multiple Image objects, each with a different src property, and handle the onload event for each image separately. Here’s an example:

var images = ['image1.jpg', 'image2.jpg', 'image3.jpg'];
var loadedImages = 0;

for (var i = 0; i < images.length; i++) {
  var image = new Image();
  image.src = images[i];
  image.onload = function() {
    loadedImages++;
    if (loadedImages === images.length) {
      // all images have finished loading
    }
  };
}

In this example, we create an array of image URLs and use a loop to create an Image object for each URL. We keep track of the number of loaded images using the loadedImages variable, and when all images have finished loading, the value of loadedImages will be equal to the length of the images array. At that point, we can perform some action, such as displaying the images on the page.