纯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上的沙漏之类的东东。采用一个动画吧，这样用户就会知道事情正在进行。

各种 loading 加载图标打包下载

结论

当预载有意义的时候做你最好的吧，你的用户将以此喜欢上你。事实上他们可能并没有注意到，但是这是一件好事情，如果他们注意到你的网站正在加载，那可能真的是太慢了。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title>CSS Preloader - Aspxhome.com</title> <style type="text/css" media="screen"> #preloader { /* Images you want to preload*/ background-image: url(/file/UploadPic/200910/28/http-status-codes-30.jpg); width: 0px; height: 0px; display: inline; } a#sample:link{ display:block; height:200px; width:200px; background-image: url(/file/UploadPic/200910/28/css-preloader-45.jpg); } a#sample:hover{ background-image: url(/file/UploadPic/200910/28/http-status-codes-30.jpg); } </style> </head> <body> <div id="preloader"></div> <a href="#" id="sample"></a> </body></html>

译自：Creating a CSS Image Preloader

中文：纯CSS图片预加载

投稿

纯CSS图片预加载

猜你喜欢