在网页设计中,经常会遇到链接以图片作为背景,而且还不止一张,不同状态下显示的图片都不一样,比如:
a{width:50px;height:50px;background:url(图片地址一)}
a:hover{width:50px;height:50px;background:url(图片地址二)}
如果网速慢或图片小的话,在你把鼠标经过此链接的时候hover显示时会有一个白色的间断的过程,闪一下,或打不开,怎么解决?
这得用到css图片的预加载:故名思义,预加载就是将图片预先加载到本地电脑的缓存当中,打开的时候无须在从服务器加载,方法有很多,下面列举几种常用的:
1.使图片的高跟宽都为0,先写样式#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;}在当页的最上面加入<div id=”preloader”></div>
2.使用非常大的background-position值将图片推出去
3.将div给一个负的margin值等等,只要能隐藏图片都行,不过要注意各浏览器的bug哦!
本站文章欢迎转载。转载请注明：转载自迷失曾经谢谢！
原文链接地址：让隐藏的背景图片加载:css图片预加载 Tags: css图片预加载
