首页 咨询中心 IT学堂
通过纯CSS方法实现图片预加载

通过纯CSS方法实现图片预加载实现图片切换流畅显示。通过纯CSS方法实现图片预加载理论就是先将要优先显示的图片通过背景加载到网站里,然后对这些图片引用

CSS代码 

这个概念就是写一个CSS样式设置一批背景图片,然后将其隐藏,这样你就看不到那些图片了。那些背景图片就是你想预载的图片。 

这是一个例子: 

以下为引用的内容: 

#preloader { 
/* Images you want to preload*/ 
background-image: url(image1.jpg); 
background-image: url(image2.jpg); 
background-image: url(image3.jpg); 
width: 0px; 
height: 0px; 
display: inline; 
}  


这只是一种隐藏你的图片的方法,所以它们不会被显示。我也见到有人使用非常大的background-position值将图片推出去。或者给一个负的margin值。有很多中方法隐藏你要预载的图片,选择最适合你的吧。 

另一种情况 

有巨大的图片需要下载的情况并不会经常发生,如果你采用通常的做法,提供某种图片正在加载的表示。这里是一些CSS,可以给用户一个提示:图片正在加载。 

以下为引用的内容: 

img { background: url(loadingHourGlass.gif) no-repeat 50% 50%; }  


gif图片可以是动画,类似于mac上的沙滩球或者PC上的沙漏之类的东东。采用一个动画吧,这样用户就会知道事情正在进行。 

 

上一篇 网站制作时实现图片预加载的三大方法
上一篇 css div或ul li dl dt float之后父容器高度不能自动增加的解决办法
本方链接: http://www.web258.cn/article/show/i1374.html
ARTICLE 相关推荐