What is “Lazy Loading” you ask? It’s a technique by which images or other content on a website is only loaded when needed, instead of all at once when you first visit the page. This can result in sites being useful and usable by users long before everything has finished loading. Why waste bandwidth and time loading images that are off the bottom of the screen? Only load them once you scroll to them and save everyone some time.

For a long time a lot of broken, non-semantic, inaccessible trickery has been done in JavaScript to accomplish “lazy loading” of images. Most of the systems required bloated markup, didn’t gracefully degrade well, often duplicated the image information twice with <noscript>, and a whole host of other trickery.

This trickery and over-use of scripting has for a long time made me shy away from these types of effects, rejecting them as flawed/broken garbage. My knee-jerk reaction when someone asked being a just plain “no… you’re REALLY better off not doing that.”

But improvements in web technologies have made much of the excess scripting people use obsolete, and as such I had to re-evaluate this position. I gave it a try to make sure that I wasn’t out of date, and full of **** on the topic. Sometimes you really need to checkity-check yourself before…

#web-design #javascript #web-development #css #html