为什么把网页图片素材放在一张图片上 有助于网页提速

作者:Davidszhou   来源:Davidszhou博客   时间:2014-05-11 15:00:11   点击:

          为什么把网页图片素材做在一张图片上?今天讲巧妙运用background标签提升网页质量。

          一个页面有好多背景素材,如果仅靠浏览器一个一个请求一个一个加载,比如说一个页面有30个单独的素材,网页在加载这个页面的时候一个访客请求30次,100个访客就要请求3000次,1000个访客就要请求300000次,现在我们把所有的素材放在一张图片上这样只需要请求一次,我们算一算,这样要节省多少次请求……

          刚开始自学的时候,我也是在仿别人站的时候发现的这个,他们好多素材都集中在一张图片上,我也很郁闷,为什么要这么做,后来越来越发现好多站都这么做,肯定对网页是有好处的。

         我们来看看他们到底是怎么做的?

         现在background标签的完整写法background: #00FF00 url(bgimage.gif) no-repeat  X Y;

        X指的是背景图片素材在X轴的距离,y:指的是在背景图片素材y轴方向的距离,比如说背景素材宽265px,单张素材高61px,两张素材放在一张图片上,默认背景图片是第一个x与y轴的值都为0px,第一张素材的y轴值为0px,第二张y轴的值为61px,如果两张图片素材是横着的变换x轴值,类似推算。

       以上是单纯的两处素材调用,还有一种情况是一处素材“动态”的那种效果

       先定义一个div 定一个选择符zongk,在css样式表里面样式是:

       #zongk { width:265px; height:61px;background:url(images/index_dingding.jpg) no-repeat 0px 0px;}
       #zongk:hover {width:265px; height:61px; background:url(images/index_dingding.jpg) no-repeat 0px -61px; }

      这样当鼠标没有移动到图片素材上显示的是y轴方向第一张素材,当鼠标覆盖在该图片素材上时变为y轴第二张图片,实则调用的是一张图片,节省了代码也节省了网页请求数。

源文件下载:

 

background图片切换 素材放在一张图片
文件类型: .zip 0c3986a45573e373701ec0e9bdff515d.zip (14.99 KB)

 

TAGS:网页素材 , 网页质量 , 网页提速

来自Davids zhou博客原创文章请尊重作者:http://www.zongk.com/zongk/2.html转载请标注此链接

文章推荐
七日热点
热力推荐
网站统计
文章总数:138
今天发布:0
软件资源数:20