Browsers now have native functionality to lazy load images.
Just add the loading attribute to your images:
<img loading="lazy" />
<!--
A bonus for if you want to know when the image has been loaded -
useful for showing a loader or running some code:
-->
<img loading="lazy" onload={someFunction} />
More useful img properties/attributes:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-loading
Browser support:
https://caniuse.com/loading-lazy-attr
Remember as a developer it is your duty to use these new features. Do not support browsers that do not have these features (like IE) as that is counter intuitive and holds us as a community back. If more developers stopped developing for crappy browsers, clients wouldnt expect us to code for them and we can enjoy the ease of features like the above.
Top comments (2)
Yeah, blame the developers. That's a good idea
Okay, so then who should push for new feature adoption if not the very people that want to use those new features?