用CSS实现图片的预加载

shenlizs

shenlizs

2016-02-19 15:15

有了下面这个用CSS实现图片的预加载教程,不懂用CSS实现图片的预加载的也能装懂了,赶紧get起来装逼一下吧!

有很多种方法来实现图片的预加载,通常大部分使用Javascript让事情滚动。不要再受Javascript预载的束缚了吧,用CSS你就可以毫不麻烦的预载你的图片。

为什么使用预载

你为什么会考虑使用预载呢?你是否曾有个网站,在那个网站你要滚动你的导航然后有个延迟直到图片被加载完……嘿嘿。预载将在这方面帮助你。它将在页面加载的时候加载那些图片并将其存储在浏览器的缓存里面。这样当用户滚动导航的时候,很漂亮而且流畅,没有延迟。

CSS代码

这个概念就是写一个CSS样式设置一批背景图片,然后将其隐藏,这样你就看不到那些图片了。那些背景图片就是你想预载的图片。

这是一个例子:

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

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

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

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

查看Demo

PS:我来解释一下这个demo吧。可能

展开更多 50%)
分享

猜你喜欢

用CSS实现图片的预加载

Web开发
用CSS实现图片的预加载

用CSS实现网页图片的预加载

Web开发
用CSS实现网页图片的预加载

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

javascript 也来玩玩图片预加载

Web开发
javascript 也来玩玩图片预加载

用css实现图片替换

Web开发
用css实现图片替换

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

用CSS实现给图片上色的效果

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
用CSS实现给图片上色的效果

又一个小巧的图片预加载类

Web开发
又一个小巧的图片预加载类

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

win10新功能介绍

win10新功能介绍

电脑硬盘指示灯一直亮怎么办

电脑硬盘指示灯一直亮怎么办
下拉加载更多内容 ↓