CSS 完成网页页面照片的预载入

为何应用预载

你为何会考虑到应用预载呢？你是不是曾有个网站，在那个网站你要翻转你的导航栏随后有个延迟时间直至照片被载入完……嘿嘿。预载将在这层面协助你。它将在网页页面载入的情况下载入那些照片并将其储存在访问器的缓存文件里边。这样当客户翻转导航栏的情况下，很好看并且顺畅，沒有延迟时间。

CSS编码

这个定义便是写1个CSS款式设定1批情况照片，随后将其掩藏，这样你就看不见那些照片了。那些情况照片便是你想预载的照片。

这是1个事例:

这只是1种掩藏你的照片的方式，因此它们不容易被显示信息。我也见到有人应用十分大的background-position值将照片推出去。或给1个负的margin值。有许多中方式掩藏你要预载的照片，挑选最合适你的吧。

另外一种状况

有极大的照片必须免费下载的状况其实不会常常产生，假如你选用一般的做法，出示某种照片正在载入的表明。这里是1些CSS，能够给客户1个提醒：照片正在载入。

结果

当预载成心义的情况下做你最好是的吧，你的客户将以此喜爱上你。客观事实上她们将会并沒有留意到，可是这是1件好事儿情，假如她们留意到你的网站正在载入，那将会真的是太慢了。

查询Demo

PS:我来解释1下这个demo吧。将会原作者沒有考虑到太多，只是想演试1下预载入的实际效果，因此这个demo网页页面做的一些简易：他只是将预载的照片用于a:hover的情况了，这样在电脑鼠标历经的情况下，便可以无闪烁的实际那张照片。嗯，也便是文中的第2种用法……