loading attribute on an <img> element specifies when to load the image.
The 2 options are
Images above the fold should load eagerly, others can be loaded lazily.
Two images with
The first value is eager (the image appears above the fold),
and the second one is
lazy (the image appears below the fold and requires scrolling to view).
<div style="height:310px; width:400px; padding: 10px; overflow-y:scroll; border: 1px solid #aaa;"> <img preload="eager" src="/img/html/poppies.jpg" /> <br /> <br /> <img preload="lazy" src="/img/html/vangogh-bedroom.jpg" /> </div>
loading options are
eager, the image loads and displays immediately following page load.
lazy, the image loads when it scrolls into view.
The default value is
This is a new attribute that not fully supported by all browsers.
Images above the fold are visible when the page is loaded.
Images below the fold are not immediately visible when the page is loaded.
Images above should be
eager, and below should be
<img loading="eager | lazy" />
||Default. Loads the image when the page loads.|
||Loads the image when it scrolls into the browser's viewport.|
Here is when
loading support started for each browser:
Back to <img>