If you have web pages that contain a lot of images, then the page would be slow to load. If many of the images are below the fold (below the visible region), then it is unnecessary to load them unless the user starts scrolling. I had this exact situation and search for a solution on the web yielded very few. There are lot more articles on pre-loading images than lazy loading.
Ideally when the css property ‘display’ is set to none or the ‘visibility’ is set to hidden, one may expect the browsers to optimize not loading the images. However, that doesn’t seem to be the case.
In mycase, there are multiple tabs and clicking each tab should show the respective section with the images. So, for me scrolling was not the criteria to trigger the image loading, but clicking the tab. So, here is what I had to do.