网页设计

您的位置:首页 > 网站专题 > 网页设计 > 详细内容>

纯CSS图片预加载

2010-09-22 21:57 作者: [大 中 小]

有很多种方法来实现图片的预加载,通常大部分使用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;}