Question

Is it possible to prevent (with jQuery) certain images from being loaded by a mobile device? Is there already a jQuery plugin?

For example: I want all images with the class “toobig” to not being loaded by a mobile device.

Thanks for your patience.

Answer 1

I don’t think there’s a way to prevent them from loading, but you could simply change the attributes of those elements in order to change what the browser attempts to load:

$('img.toobig')
    .attr({'width' : 0, 'height' : 0, 'src' : 'path/to/small/image.png'})
    .hide();

The above finds the relevant images, gives them a height and width of 0 (so the layout engine can flow/reflow the document quickly, and gives an src to, ideally, a small transparent image file. Of course, you could simply removeAttr('src'), if you prefer.

The call to hide() at the end is simply to ensure that, even with the size of 0, there’s no way for the images to show in the document. In this case remove() could, of course, be used instead.