纯CSS图片预加载
作者：vocal 来源：前端观察 时间：2009-10-28 18:40:00
有很多种方法来实现图片的预加载，通常大部分使用Javascript让事情滚动。不要再受Javascript预载的束缚了吧，用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上的沙漏之类的东东。采用一个动画吧，这样用户就会知道事情正在进行。
结论
当预载有意义的时候做你最好的吧，你的用户将以此喜欢上你。事实上他们可能并没有注意到，但是这是一件好事情，如果他们注意到你的网站正在加载，那可能真的是太慢了。
译自：Creating a CSS Image Preloader
中文：纯CSS图片预加载
标签：预加载,图片,css
0
投稿猜你喜欢
Web设计中的黄金分割[译]
2009-02-20 13:41:00
ASP在线升级类文件源码
2008-10-10 13:09:00
几个好用的Asp自定义函数
2007-09-26 14:28:00
让Entity Framework支持MySql数据库
2010-12-14 15:22:00
setInterval 和 setTimeout 会产生内存溢出
2008-03-08 13:10:00
CSS兼容性(IE和Firefox)技巧大全
2010-07-29 12:29:00
如何去除点击链接时出现的虚线框
2007-12-02 17:38:00
asp 过滤尖括号内所有内容的正则代码
2011-04-03 10:40:00
如何让WML页面自己更新？
2008-05-21 13:35:00
mssql 大小写区分方法
2008-12-29 14:08:00
WEB2.0网页制作标准教程（9）第一个CSS布局实例
2008-02-19 19:05:00
Dreamweaver的CSS布局ul和li范例
2009-08-28 12:34:00
asp自动生成javascript检验函数
2009-01-21 19:40:00
图片预加载效果的实现
2008-06-16 12:08:00
在ASP中按指定参数格式化显示时间的函数。
2010-05-27 12:29:00
各种JavaScript开发工具比较
2007-10-23 13:29:00
用实例分析如何整理SQL Server输入数据
2009-01-20 15:16:00
Access 2002的三个实用技巧
2007-10-22 12:22:00
linux下如何备份还原mysql数据库
2010-08-08 08:59:00
Google的产品设计指导思想
2008-03-23 14:15:00
