Loading the initial images in the viewport, then loading x number of objects at a time until the page is fully loaded (never waiting), where the order of the objects is constantly sorted based on proximity to the viewport or other behavioral prediction.

Possibly this method should be called opportunistic loading?

I’ve been tinkering around with designing a site with lazy loading content, javascript and even css, where a simplified site is delivered immediately, then more functionality is layered on, making this occur without affecting layout is challenging, but the reward is great. The initial pageload and first look at the content is incredibly fast. Post-loading menus, sidebars and ads makes for a fantastic user experience.

I see your point with the onready event arriving sooner as the overall size of the page will be smaller and load faster.

Using the onready event is totally up to you I think. For me, I usually use it to make sure every element I hardcoded in JS is loaded.

With lazy loading in general, a better pratice can be:
- loading the contents in the viewport at the initial load
- after x seconds, loading the rest of the content without even waiting for the user to scroll.

But if you have no onload javascript code attached, you can scroll smoothly through the page even if images are loading. Loading images do not block the browser.

What do you think? When is this pattern helpful?