纯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
投稿猜你喜欢
Django修改端口号与地址的三种方式
2023-06-22 00:48:27
OpenCV停车场车位实时检测项目实践
2022-09-13 09:37:08
Python图片检索之以图搜图
2021-08-11 12:08:23
Python爬取世界杯热搜榜并制作脚本自动发送信息到邮箱的过程
2021-01-21 20:35:53
Python SELENIUM上传文件或图片实现过程
2021-12-22 09:11:53
实例详解Python中的numpy.abs和abs函数
2023-03-09 08:06:38
基于Go Int转string几种方式性能测试
2024-05-08 10:17:04
使用go gin来操作cookie的讲解
2023-09-12 14:21:49
python scrapy框架中Request对象和Response对象的介绍
2021-04-02 07:29:59
python使用reportlab实现图片转换成pdf的方法
2021-09-24 22:32:26
python使用信号量动态更新配置文件的操作
2023-02-25 08:43:18
详解Python数据类型、进制转换、字符串格式化的问题
2022-11-11 16:24:10
JS实现简单的抽奖转盘效果示例
2024-04-22 22:29:39
MySQL自定义函数简单用法示例
2024-01-20 12:47:17
软件测试面试如何测试网页的登录页面
2023-12-10 20:45:30
python实现简单的购物程序代码实例
2022-09-03 05:29:13
node.js使用免费的阿里云ip查询获取ip所在地【推荐】
2024-05-13 09:30:23
python中的内置函数max()和min()及mas()函数的高级用法
2023-01-21 18:45:43
如何把图片上传到数据库中并显示出来？
2009-11-06 13:50:00
python实现网站用户名密码自动登录功能
2021-07-05 09:48:13