How to implement Lazy Loading & LQIP?

Here are some code examples of implementing Lazy Loading and LQIP (Low-Quality Image  Placeholders) with Cloudinary. All of the examples are leveraging the Cloudinary JS v2 SDK.

If you'd open the snippets and inspect the network tab of the page, you'll notice that for each image, its low-quality placeholder is requested first, and only then the high-quality version is requested.

In case you want to try the bellow apps with your Cloudinary account, be sure to:

• Set your cloud name in -
  

  const cld = new Cloudinary({
    cloud: {
      cloudName: <cloud_name>
    }
  });

• Change the images array to contain images (public IDs) from your account.

Javascript -

React -

Angular -

You can see the relevant documentation here-

JS - https://cloudinary.com/documentation/javascript2_integration
React - https://cloudinary.com/documentation/react2_integration
Angular - https://cloudinary.com/documentation/angular2_integration