Previously we have introduced how Medium achieved loading images lazily, basically what they did was using lots of HTML tags and CSSs to change the images at different stage. It needs lots of code to do this. With the high demand of this feature for resource consumption and performance consideration, Chrome is now working on a feature to provide native support for loading images/iframes lazily. This feature is named lazyload.
lazyload will allow three values:
- auto: the default behavior of lazyload attribute is not altered (user agent decides)
- on: the feature lazyload is turned on which will lazily load resources
- off: the default behavior of lazyload is set to off.
This property can be applied on images and iframes. The code would look like:
<iframe src="https://www.example.com/a" lazyload="on"></iframe> <img src="image.png/a" lazyload="on"></img>
With lazyload turned on, the resources will be deferred to load until it's really necessary(Usually only when it is in the viewport). This will largely save bandwidth for users especially on mobile devices. Moreover, to web developers, this will also save lots of development time which they originally need to use third party libraries and write lots of tricky code to make them work.
Currently this feature is being developed and tested and will be pushed to Chrome once everything is done. The status can be checked at Feature Policy: lazyload. The detailed explanation about this feature can be found on Github.
So far there is no news on whether other major browser vendors are doing the same or will follow the same in the future. But this will definitely be a good one to have since it benefits both end users and developers.
