繁體中文当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > CSS 实现网页图片的预加载
- CSS样式表
- 网页页面原结构和CSS写法导致浏览器兼容问题
- CSS经验:ul列表不正确使用的趋势
- Styleneat帮助你容易阅读和更新CSS文件
- CSS的内容注释和作者及文件版本注释
- 网页设计制作教程:CSS书写格式
- 将CSS按照层叠式结构化重新组织与构建
- CSS教程之CSS盒模型
- CSS 框架BlueTrip特性
- IE7和FF浏览器中右下角图片广告
- CSS实例:通过定义渐变边框给图片加阴影
- 网页选项卡TAB设计原则和应用案例教程
- 8个设计规范的表格Table CSS样式应用
- CSS制作的背景动态变化的网页导航
- 网页选项卡TAB设计原则和应用案例教程
- 使用CSS给图片添加阴影的方法
- WEBJX收集20个高质量的免费CSS模板
- 13个网页页面浏览器兼容性验证工具
- 11个用CSS样式表制作网页按钮的教材
- CSS3属性使网站设计增强同时不消弱可用性
- 清理无用的CSS样式的几个有用工具
CSS样式表 中的 CSS 实现网页图片的预加载
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2010-01-10 浏览: 113 ::
收藏到网摘: n/a
为什么使用预载
你为什么会考虑使用预载呢？你是否曾有个网站，在那个网站你要滚动你的导航然后有个延迟直到图片被加载完……嘿嘿。预载将在这方面帮助你。它将在页面加载的时候加载那些图片并将其存储在浏览器的缓存里面。这样当用户滚动导航的时候，很漂亮而且流畅，没有延迟。
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上的沙漏之类的东东。采用一个动画吧，这样用户就会知道事情正在进行。
结论
当预载有意义的时候做你最好的吧，你的用户将以此喜欢上你。事实上他们可能并没有注意到，但是这是一件好事情，如果他们注意到你的网站正在加载，那可能真的是太慢了。
查看Demo
PS:我来解释一下这个demo吧。可能原作者没有考虑太多，只是想演示一下预加载的效果，所以这个demo页面做的有些简单：他只是将预载的图片用于a:hover的背景了，这样在鼠标经过的时候，就可以无闪动的现实那张图片。嗯，也就是文中的第二种用法……
评论 (0) All
