前端开发

 首页 > 前端开发 > css教程 > 网页提速:利用css sprites减少图片请求 - html/css语

网页提速:利用css sprites减少图片请求 - html/css语

分享到:
【字体:
导读:
          在高举用户体验为中心的网络时代,你是否因为打开网页速度太慢而关闭网页呢?相信很多人的答案都是肯定的。在高速的网络时代,千万不要挑战广东网民的耐心,不然只会导致网民远...

  在高举“用户体验”为中心的网络时代,你是否因为打开网页速度太慢而关闭网页呢?相信很多人的答案都是肯定的。在高速的网络时代,千万不要挑战广东网民的耐心,不然只会导致网民远离你的网站而去。

  网页提速有很多的方法,其中一条就是减少http请求。每一个网站都会用到图片,当一个网站有10张单独的图片,就意味着在浏览网站时会向服务器提出10次http请求来加载图片。下面为大家介绍减少图片请求的方法。

  css sprites:网站前端开发者大多称之为“css精灵”,通俗的理解就是:将多张小图片合成为一张大图片,减少http请求次数而达到网页提速。下面以淘宝网为例子,为大家讲解下css sprites是如何实现的。如我们要在网页上显示“今日淘宝活动”这个图片。

  

 

  实现代码:

       

  width:要定位图片的宽度。height:要定位图片的高度。(css sprites必须定义容器的大小,不然会显示出错)

  background:url(sprites.gif)背景图片的路径。 no-repeat:背景不重复。 -133px:X坐标的位置 ,-153px:y坐标的位置。

  可能有人会不明白这个-133px 和-153px是怎么来的,这个坐标是小图片在大图片中的x坐标和y左边坐标,如下图,红色点的坐标是在大图上x坐标为133px y坐标为153px。(坐标也可以用百分比表示,如:50% 50%)有人会提出,为什么坐标是正数,你却写成了负数呢?因为用background这种方式定义背景图片,默认x y坐标是0 0。如下图今日淘宝活动图片的坐标是133px 153px,所以要用-133px -153px来归零才能正确的显示图片。

  

 

  css sprites的优点:可以减少http的请求数,如10张单独的图片就会发出10次的http请求,合成为一张的大图片,只会发出一次的http请求,从而提高了网页加载速度。

  css sprites的缺点:凡事有利必有弊端。可能有人喜欢,有人不喜欢,因为每次图片改动都要往这张图片添加内容,图片的坐标定位要很准确会,会稍显繁琐。坐标定位要固定为某个绝对值,因此会失去如center的一些灵活属性。

  css sprites有优点也有缺点。要不要使用,具体要看网页以加载速度为主还是以维护方便容易为主。

分享到:
卢松松:原来404页面可以这样做 - html/c...
  404页面是网站必备的一个页面,它承载着用户体验与SEO优化的重任。404页面通常为用户访问了网站上不存在或已删除的页面,服务器返回的404错误。如果站长没有设置404页面,会出现死链接,蜘蛛爬行这类网址时,不利于搜索引擎收录。        设置404页面的两大好处   1:引导用户不要关闭网站,增强用...
CSS文字图片div元素居中方法之水平居中 -...
  文字居中,文字垂直居中水平居中,图片居中,图片水平居中垂直居中,块元素垂直居中?当我们在做前端开发是时候关于css居中的问题是很常见的。情况有很多种,不同的情况又有不同的解决方式。水平居中的方式解决的时候相对来说通过css比较容易设置,垂直居中相对比较棘手。   先来说一下水平居中的不同情况与不同解决...
  •         php迷,一个php技术的分享社区,专属您自己的技术摘抄本、收藏夹。
  • 在这里……