Is there a way to make images inside display:none not get downloaded by the browser?

I want the browser (mobile webkit especially) to NOT download images that are inside display:none divs. Right now, they get downloaded and not rendered.

Is there a jquery plugin to do this?

2012-04-04 01:44
by TIMEX

You could create the <img> tags without a "src" attribute, and with a "data-src" (or something) instead, and then update them with JavaScript based on visibility - Pointy 2012-04-04 01:46

@Pointy Yep, that's a common trick and one I employed myself recently. You have to write a little more code to set .attr('src') equal to .data('src') on the fly, but that's quick and easy to do - Blazemonger 2012-04-04 01:48

you can use data-* attributes. that way, you can have jQuery load them on demand:

<img data-source="image_path">

//this one gets all images and loads them
$('img').each(function(){
    //loads the source from data-source
    this.src = this.getAttribute('data-source');
});

<img data-source="image_path" class="foo">
<img data-source="image_path" class="foo">

//this one gets all images that have class foo and loads them
$('img.foo').each(function(){
    //loads the source from data-source
    this.src = this.getAttribute('data-source');
});

ofcourse you need to wrap this in a function so that you can call which images on demand. like:

function loadImg(selector){
    $(selector).each(function(){
        this.src = this.getAttribute('data-source');
    });
}

//load images with class foo:
loadImg('.foo');

2012-04-04 01:59
by Joseph

just heads up on this approach, when src is implicitly empty on an img element some browsers (looking at you ie) will not interpret it correctly and will attempt to load the resourse anyway. An incorrect empty src will be seen as a relative path on top of the current document's, meaning that an http request would be made to the same pag - o.v. 2012-04-04 06:06

@o.v. good tip. so using a 1x1 gif as an initial image should patch it up, right - Joseph 2012-04-04 06:09

I guess that only points out the need to have a valid src set on an image tag. In the context of this question, I'd ask why does the element need to be present at render-time in the first place? If you want to toggle img's visibility, it implies it should be preloaded. OP seems to be after adding/removing behaviour - might as well just generate and add an img element at runtime - o.v. 2012-04-04 06:22

I don't think so. To be sure, you would need your original HTML DOM to exclude the hidden images, which you could do with server-side programming based on user agent sniffing (although that is not recommended). Modifying the DOM after document.ready or document.load will mean that the browser has already had a chance to request assets from the server even if they might not be displayed.

It would be unusual but if you still want to use jQuery you could follow @Pointy's advice and make all images placeholders in your markup. Then replace the :visible placeholders with the images you want using an attribute as the data source. No plugin is needed, just use something like replaceWith() or attr() to swap out the placeholder node for the image you want downloaded or change the src attribute.

I would use a 1x1 transparent gif as the placeholder with the correct height and width attributes rather than no source <img> for a placeholder. That way the page flow will be determined correctly when the page renders so it won't jump around as your images lazily load.

2012-04-04 02:08
by Dylan Valade

@Joseph explained it perfectly - Dylan Valade 2012-04-04 02:09