Prevent progressive (line by line) loading of background image

Question

I am looking for a way to have the background-images (CSS) load as if they were appearing once loaded, and not "rolling down". I'd rather have an image appear 300ms late in one flash instead of having it appear like a bad PowerPoint effect.

Any techniques or specific code that could be used (besides caching)?

Thanks,

Answer 1

First, if your image appear in "rolling down" it's Image it's too heavy.

Exist different program or website for reduce your image for web ( without losing quality ) for sample, Yahoo SMUSH.IT! is good for that!

After, I don't know if existing a method for appear background-image after download... maybe in JavaScript...

Answer 2

jsfiddle http://jsfiddle.net/9fFKT/3/

$("#bg").hide();
$('#bg').load(function(){

  $('#bg').show();
});

using jquery you can hide until it loads and display it once its loaded

Answer 3

Basically you'd need to either have the elements hidden on initial load, or to have no background set in CSS, add the image via JavaScript, then apply the CSS background with the onload event of each image.

CSS alone cannot do this.

Answer 4

You could load the image as hidden at the top of your page, so when you put it into the DOM later it is a cached copy. Or, you can put a hidden attribute on it, and after a 300ms timer, turn hidden off. The latter will do what you want with more certainty, but it depends on your viewers network speeds.