Native image lazy loading


This feature has been longed after for a long time, by me at least. Until now you needed to use some library if you want to lazy load your images in all browsers, and you still do if you want to to work in all browsers. However you can start using lazy loading for images , as well as iframes actually, if you don't mind it only working in a few browsers, since browsers that don't support it will just ignore it and load the image normally.

All you have to do to use it is to add the attribute loading with the value of lazy like shown below:

<img src="gillis-cat.jpg" loading="lazy" alt="..." />
<iframe src="some-page.html" loading="lazy"></iframe>

That's it, simple as pie! Now to demonstrate this I'll add a bunch of <br> tags below to create some space and then add an image of my cat. If you're using Chrome or Opera the image should not load until right before you get to it. If your internet is too fast you might not even notice it at all. While experimenting with this feature I had to open the developer tools in my browser and look at the network tab to see the image get loaded in as I scrolled down. Hopefully, if you are reading this in the near future, it will work in whatever browser you may be using.

Here we go. Scroll down!

Keep going!

Won't be long, keep scrolling!

Almost there!

Gillis cat whos name is Títan

Finally! Maybe I made the space a bit too big. Anyway that's my cat. His name is Títan and he likes to eat tuna, play with toy mice, run around like crazy and of course cuddle on my desk as I work.