沙发类厂家
免费服务热线

Free service

hotline

010-00000000
沙发类厂家
热门搜索:
技术资讯
当前位置:首页 > 技术资讯

网页提速利用csssprites减少图片要求

发布时间:2019-03-12 15:47:57 阅读: 来源:沙发类厂家

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

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

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

实现代码:

<div style="width:107px; height:134px; background:url(f) no-repeat -133px -153px"></div>

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

background:url(f)背景图片的路径。 no-repeat:背景不重复。 -1筱惠美电影33px:X坐标的位置 ,-153px:y坐标的南波杏番号位置。

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

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

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

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

相关阅读