It may not be obvious to everybody, but everything that relies on the use of the
attribute can be “lazy loaded”.
Now, what most people do is defer the loading of images: you take your
tags, strip them of their
attributes, and store the value somewhere else, like a
attribute. This way, the browser won’t load the resource (image, in this case) at all.
When you do need to load the image, simply convert the
attribute to an a
attribute with the same value, and the browser will start loading the resource instantly.
var image = document.querySelector( "img" );
image.setAttribute( "src", image.getAttribute( "data-src" ) );
Recently, I was working on a project that required a lot of embeds to be present in page, with more of them optionally loaded upon clicking on a pagination element.
Embeds can be heavy. No, heavy
is not quite the word I’m looking for. Lots of embeds can kill
a web page performance. But, again, I had no other choice but to have a bunch of
s together side-by-side.
Then it dawned on me: the same reasoning that we use for images could be applied to those
s as well. As a matter of fact, whatever relies on a
attribute, even stylesheets, can be lazy loaded like that.
And that’s exactly what I ended up doing: having a bunch of inert
s, each one with its
attribute regularly filled, waiting to be converted to the standard
Sure, if you load a lot of those i
s, you’ll end up having a pretty resource-demanding page at the end, but sure enough, the initial load will be much much lighter.