纯CSS图片预加载
作者:vocal 来源:前端观察 发布时间:2009-10-28 18:40:00
标签:预加载,图片,css
有很多种方法来实现图片的预加载,通常大部分使用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图片预加载
0
投稿
猜你喜欢
- IE8主页http://www.microsoft.com/windows/products/winfamily/ie/ie8/defaul
- 这里所说的“小偷”指的是在ASP中运用XML中的xmlhttp组件提供的强大功能,把远程网站上的数据(图片,网页及其他文件)抓取采集到本地,
- 作用域链(Scope Chain)JavaScript中的一种重要机制,JS中所有的标识符(Identifier)都是通过Scope Cha
- 首先你要确定错误的原因: 让IE显示详细的出错信息: 菜单--工具--Internet选项--高级--显示友好的HTTP错误信息,去掉这个选
- 如何检测某个对象是否有某个属性?第一想到的——没错,in:"prop" in obj这很完美,不过,还有不少人热衷下面的
- 我们这里所说的head区域,是指页页html代码的<head>和</head>之间的内容。在以前的文章中,主要介绍了
- 但是有时候,可以视看处进逻辑程度,可以把三者写成一个触发器,只是在其中稍作判断而已。 你可以根据从下面方法判断触发器是是处理了插入,删除还是
- 见过很多网站,在设计的时候给了用户很大的自由度,我个人并不赞同这种做法。最简单的例子,圈网。我在研究圈网的时候注册完成后圈网给了我一个搜索框
- HTTP(HyperTextTransferProtocol)是超文本传输协议的缩写,它用于传送WWW方式的数据,关于HTTP协议的详细内容
- 类的定义 类定义有三种基本方法,1、创建并能返回特定类型的对象的函数(工厂函数),例如:function Co(){ var o = new
- 在SQL Server 2008 中,新的FILESTREAM 数据类型,允许像文件和图片这种大型的二进制数据可以直接在NTFS文件系统中进
- 指定结果集的列名AS 子句可用来更改结果集列名或为导出列指定名称。当结果集列由对表或视图中的列的引用进行定义时,结果集列的名称与所引用列的名
- 更换域名,估计是很多站长都很头疼的事情。通常大家的做法就是把老的域名通过IIS设置做301跳转到新的域名。对于只有一个虚拟空间的站长来说,换
- 我一直不很明白在中国国内流行的设计风格,象在国外的很多地方都有鲜明的设计大方向,比如韩国站点设计一般比较花哨,所以动画很多,我们常常看到韩国
- <% Function cutbadchar(str) badstr="不|文|明
- 这个例子可作为一个模式,在你需要的时候套用。<!DOCTYPE HTML PUBLIC &q
- asp上传的时候出现这种 错误:Server 对象 错误 'ASP 0177 800401f3'Server.CreateO
- 在 JavaScript 中,可以用 instanceof 来判断一个对象是不是某个类或其子类的实例。比如:// 代码
- 1.漏洞介绍在XHTML 1.0标准下,使用特殊构造的CSS样式,在Internet Explorer 7.0
- 据国外媒体报道,相较于IE8浏览器,微软最新一代浏览器IE9的最大改进就是硬件加速HTML5。微软承诺,通过利用IE9中的硬件加速功能,开发