纯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;

}

复制代码运行代码编辑代码
Powered by W3Cfuns.com

这只是一种隐藏你的图片的方法，所以它们不会被显示。也可以用background-position值将图片推出去，或者给一个负的margin值,position定位到视觉范围以外...有很多中方法隐藏你要预载的图片，选择最适合你的吧。

（PS:大部分浏览器都是只加载了最后一个图片，前两个图片被无视了。但是在webkit核心的浏览器中，比如chrome，会预加载这三个图片。上例为我们提供了一个很好的处理问题的思路，但是对于在同一个css样式中加载多个图片的用法，可能还要等css3的多背景图片属性被更多的浏览器支持才行。）