Loading strategy: when should I fetch images?

Question

I redesigned my data loading strategy following this answer. My page displays a list of objects components (on a single page, between 30 and 150 items, sorted by section of one to 5 items maximum). Each of these objects have an image component.

The loading order is as follows:

1. The objects data isn't loaded, so I use a placeholder like this:
2. The objects data is here so I display the objects components, but since I have not the image yet, I use a dataUrl low definition placeholder, as described here. FYI, the placeholder is 120 Bytes and shipped with the original data, the real image is 1.7 Kbyte so this is a nice deal.
3. I have several parameters attached to my image component. One of them is lazy loading: if it is on, it will fetch the image only when its related object is in screen.

The final result is awesome, very clean and fast. The initial load has this "wait for it... coming...." feeling that helps a lot with the loading times related user experience.

However, I noticed that on the big websites such as Quora, Medium, etc. images are not lazy loaded, or at least not the way I do it: after the page has been loaded, even if it is not in the screen, the image is fetched in order to avoid to rely on the low definition placeholder everywhere.

That makes sense to complete the closest off-screen elements when you can, in preparation of the next user moves.

I would like to know if the options have been studied and if there is a consensus on how to do it right. As I see it it can be done 3 ways (possibly all-together):

1. You load only what the user can see (what I do)
2. After x second on the page, you load (some or all of) the off-screen assets
3. You load the closest off-screen assets, e.g. those placed x pixels below the current position.

Answer 1

The best solution is typically option 3. Say the screen holds roughly 10 items, on page load send out the request for those 10 items and the 10 items immediately proceeding them (20 total). Then when the user scrolls past your first 10 items send the request for the third set of 10 items and load those in. This way the user will always have a buffer as they scroll and will be none the wiser that you're lazy loading content.

Of course you can play with numbers to best optimize depending how likely users will scroll through content and how much data you can send downstream without slowing the application.