Native Lazy Loading images

Chromium-based browsers such as Chrome, Edge, Safari, and Firefox support the loading="lazy" attribute within the "img" tag.

In the following example we show a box with a scroll and 6 images of which there are several that are not visible on the screen. If you use one of these mentioned browsers, when scrolling through the images, as we go down we can see how the images are loading little by little.

<div id="imgs_inside" style="width:600px; height: 600px; margin-bottom:5px; overflow: scroll;">
  <img src="https://www.lookkle.com/images/test/p_1.JPG" width="300" height="300" loading="lazy" >
  <img src="https://www.lookkle.com/images/test/p_2.JPG" width="300" height="300" loading="lazy" >
  <img src="https://www.lookkle.com/images/test/p_3.JPG" width="300" height="300" loading="lazy" >
  <img src="https://www.lookkle.com/images/test/p_4.JPG" width="300" height="300" loading="lazy" >
  <img src="https://www.lookkle.com/images/test/p_5.JPG" width="300" height="300" loading="lazy" >
  <img src="https://www.lookkle.com/images/test/p_6.JPG" width="300" height="300" loading="lazy" >
</div>

Comments

Captcha Code PHP Captcha

Interesting Articles

HTML based website templates