Lazy Loading Images with NO SCRIPTS! (HTML only)

Lazy loading is a common strategy to improve performance by identifying resources as non-blocking (non-critical) and loading them only when needed, rather than loading them all immediately. Images are one of the most common assets to be lazy-loaded in web apps. To make lazy loading images easier, we have introduced support for the load attribute on the HTML img element. Setting the value to lazy will instruct the browser to defer loading of images that are off-screen until the user scrolls near them. The only other possible value is eager, which is the default value as you’d expect. img src="image.jpg" loading="lazy" alt="..." You can determine if a given image has finished loading by examining the value of its boolean complete property. Note: The load event fires when the eagerly-loaded content has all been loaded. At that time, it’s possible (or even likely) that there may be lazily-loaded images within the visual viewport that have yet to load. Note: Chrome has also implemented experimental support for lazy loading of frame content, but this is not in a standard yet; we are waiting until it has been standardized. https://hacks.mozilla.org/2020/04/firefox-75-ambitions-for-april/ Source Code https://github.com/hnasr/javascript_playground/tree/master/lazy_loading 🏭 Software Architecture Videos https://www.youtube.com/playlist?list=PLQnljOFTspQXNP6mQchJVP3S-3oKGEuw9 💾 Database Engineering Videos https://www.youtube.com/playlist?list=PLQnljOFTspQXjD0HOzN7P2tgzu7scWpl2 🛰 Network Engineering Videos https://www.youtube.com/playlist?list=PLQnljOFTspQUBSgBXilKhRMJ1ACqr7pTr 🏰 Load Balancing and Proxies Videos https://www.youtube.com/playlist?list=PLQnljOFTspQVMeBmWI2AhxULWEeo7AaMC 🐘 Postgres Videos https://www.youtube.com/playlist?list=PLQnljOFTspQWGrOqslniFlRcwxyY94cjj 🚢Docker https://www.youtube.com/playlist?list=PLQnljOFTspQWsD-rakNw1C20c1JI8UR1r 🧮 Programming Pattern Videos https://www.youtube.com/playlist?list=PLQnljOFTspQV1emqxKbcP5esAf4zpqWp