Load 1000 images smartly

Question

I have like 1000 images on the same page. Unfortunately, I can\'t use sprites on them, as the number of images increases continuously. So you can imagine it sends 1000 HTTP

Answer 1

Use lazy loading to render these images when the user scrolls the page load set of images on the fly.

This is a complex way to do where you load af few (N number of) images first and check that the user has not scrolled till few rows of images are left before containerNode.offsetHeight. If the user scrolls down that limit you create N number of image tags for the next n images to be loaded.

This N can be varied based upon the image file size or dimensions.