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?
.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');
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.
<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