I do something very similar, except I use the custom attribute on an image element to hold the url. The src attribute contains a placeholder. When ready, all my script does is switch out the src with the desired image url. This is a bit faster than creating and inserting elements into the DOM.
I also determinate the readiness on scroll position so I’m only manipulating elements that are in view instead of everything. The page becomes unresponsive very quickly when you have a lot of elements to work over.
Still, your technique is a nice and simple example to get one started.
Ryan
Very succinct.
I do something very similar, except I use the custom attribute on an image element to hold the url. The src attribute contains a placeholder. When ready, all my script does is switch out the src with the desired image url. This is a bit faster than creating and inserting elements into the DOM.
I also determinate the readiness on scroll position so I’m only manipulating elements that are in view instead of everything. The page becomes unresponsive very quickly when you have a lot of elements to work over.
Still, your technique is a nice and simple example to get one started.