Prevent images loading in html

Question

I'm developing a mobile version of a website, unfortunately because of the archaic CMS in use it's not possible for me to alter or offer an alternative template for the pages - therefore I only have css and javascript (and maybe .htacess) at my disposal.

I've looked around, and I think there may be a way to prevent images from loading using jquery: http://stackoverflow.com/questions/1667868/prevent-images-from-loading - however, this didn't seem work (the images were still loaded.) Having said that, the lazy loader thing seems to do this and I've seen it being used IRL - so I'm fairly sure there's a way.

What I'd really like would be a way to set the .mobileonly class on elements in my html and make jquery prevent the loading of them and anything in them.

Any pointers would be great, thanks guys!

Cheers! John.

Answer 1

It seems to me like lazy loading would do the job for you.
For every image you don't want to be loaded you could put a small default image instead and store the url in e.g. the 'name' attribute. Give it css class 'mobileonly'. Style as you wish.
Then for non-mobile visitors call a js function from body.onLoad which finds all imgs with css class 'mobileonly' and lazy loads the url retrieved from the name attribute.

Consider also: Usually mobile devices not only have less bandwith but also less cpu power to run js. So all js that's not run on a mobile device makes your site faster. :-)