Prevent progressive (line by line) loading of background image

南笙酒味 提交于 2019-12-08 00:59:15

问题


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,


回答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...




回答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




回答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.




回答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.



来源:https://stackoverflow.com/questions/11741487/prevent-progressive-line-by-line-loading-of-background-image

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!