How to Use a Proxy Object to Implement Lazy Loading of Images in JavaScript

Lazy loading is a technique used to optimize the loading of web pages by deferring the loading of non-critical resources until they are actually needed. One common use case for lazy loading is images, which can be quite large and slow to load.

In this blog post, we’ll explore how to use a proxy object in JavaScript to implement lazy loading of images. We’ll define a RealImage class that represents an image that has been loaded from disk, and a ProxyImage class that represents an image and provides lazy loading. We’ll also provide a usage example that demonstrates how the proxy loads the real image from disk and displays it only when it is actually needed. By the end of this post, you’ll have a solid understanding of how to use a proxy object to implement lazy loading of images in your JavaScript applications.

Example Explanation

In this example, we define a RealImage class that represents an image that has been loaded from disk. We also define a ProxyImage class that represents an image and provides lazy loading. When a client requests that the image be displayed, the proxy checks if the real image has already been loaded. If it hasn’t, the proxy loads the real image from disk and then displays it.

In the usage example, we create two proxy images, and then we display the first image. Since the first image has not been loaded yet, the proxy loads it from disk and then displays it. When we display the second image, since it has not been loaded yet either, the proxy loads it from disk and then displays it. Note that in both cases, the real image is only loaded when it is actually needed, which can help to reduce memory usage and improve performance.

// Define a subject that represents an image
class RealImage {
  constructor(filename) {
    this.filename = filename;
    this.loadImageFromDisk();
  }

  // Define a method that simulates loading an image from disk
  loadImageFromDisk() {
    console.log(`Loading image ${this.filename} from disk...`);
  }

  // Define a method that displays the image
  displayImage() {
    console.log(`Displaying image ${this.filename}...`);
  }
}

// Define a proxy that represents an image and provides lazy loading
class ProxyImage {
  constructor(filename) {
    this.filename = filename;
  }

  // Define a method that displays the image (and loads it if it hasn't been loaded yet)
  displayImage() {
    if (!this.realImage) {
      this.realImage = new RealImage(this.filename);
    }
    this.realImage.displayImage();
  }
}

// Usage example
const image1 = new ProxyImage("image1.jpg");
const image2 = new ProxyImage("image2.jpg");

// The first image is loaded and displayed when requested
image1.displayImage();

// The second image is only loaded and displayed when requested
image2.displayImage();