武汉新华电脑学校--互联网教育专家
湖北省有实训基地的IT电脑学校
  新媒体UI设计师
  云电子商务高级工程师
  VR数字媒体高级工程师
  VR空间创意设计师
  互联网运营与创客
 
学习园地 你当前的位置:主页 > 学习园地 >  

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


在线交流
文章来源:未知 作者:guoqicui 浏览次数:

有很多种方法来实现图片的预加载,通常大部分使用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上的沙漏之类的东东。采用一个动画吧,这样用户就会知道事情正在进行。

结论

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

查看Demo

PS:我来解释一下这个demo吧。可能原作者没有考虑太多,只是想演示一下预加载的效果,所以这个demo页面做的有些简单:他只是将预载的图片用于a:hover的背景了,这样在鼠标经过的时候,就可以无闪动的现实那张图片。嗯,也就是文中的第二种用法…… 


本站首页 |  新闻中心 |  校园风景 |  专业设置 |  杰出校友 |  就业服务 |  考试考证 |  师资力量 
Copyright@1988-2017 All rights reserved.鄂ICP备11008212号   版权所有:北京朗杰科技有限公司
地址:湖北省武汉市青山区冶金大道180号 邮编:430083 电话:027-8266 9666 英文域名:www.whxhdn.com
武汉新华电脑学校新华电脑学校专业武汉新华电脑培训学校武汉电脑学校计算机学校IT学校
网站声明:任何企业或个人以任何形式复制或传递本网站所载述的域名商标、文字、视像及声音内容、图形及图象应当注明来源于本网站。