[lightningspirit]

I like this solution, it looks very simple and should’ve been consider as part of best practices if it works technically. However, I also think that this whole trade off is broken from the beginning, it should be part of browser’s set of rules to either decide or not it should render the image or not by default, and the decision of eagerly load an image should just an hint given by the developer as a scape hatch. The current approach forces the decision to be forcefully deferred to the application which needs to guess what’s the best approach for the current set of devices in the market which also adds a constant maintenance burden.

[DamonHD]

Browsers already have an early scanner to look ahead for things that it may need to load soon, such as images, and piles of heuristics. Those heuristics are hard in part because many HTML authors don't bother marking up their image dimensions. The lazy attribute helps avoid loading images that the author can be fairly sure will not be in the initial viewport, so is an optimisation hint to override some of those heuristics. So it saves some bandwidth and helps ensure that things above the fold are not fighting things below in the initial viewport construction. So we're about two levels of optimisation in here, but browsers do a reasonable job when fed good img tags anyway.