how to lazy load images from array using javascript

I get a json response from a simple API I made,it contains thousands of image urls and sizes around 1.7MB. I am not using any JS framework/libraries. So, what would be efficient way to load the images in DOM?

Answer

you can get this done by including lazy load to your image tag by setting the loading to “lazy” This is the simplest solution I know, no js required

<img src="your-images-url-goes-here.jpg" loading="lazy" alt="..." />

The loading attribute gives us the option to delay off-screen images and iframes until users scroll to their location on the page. loading can take any of these three values:

lazy: works great for lazy loading eager: instructs the browser to load the specified content right away auto: leaves the option to lazy load or not to lazy load up to the browser.