Loading on intersection

Why not control the loading of images yourself, at the Javascript level? In this case our imagination is not limited and no browser limitations will interfere.

In past, we had to keep track of items in a scroll event, counting coordinates and all that stuff. Now we have Intersection Observer, which is a bit easier. So, we load the image only when it gets to the viewport.

The scheme is simple - we hold the URL to the image somewhere, and when the img tag hits the viewport, we substitute that URL in src for it. Voila! The browser loads the picture.

If you quickly scroll down the page, you can see that there is some nonsense in place of the unloaded pictures. We'll deal with that later.