加快网页载入速度-CSS Sprite

CSSSprites技术详解

最新推荐文章于 2021-08-03 18:25:34 发布

转载最新推荐文章于 2021-08-03 18:25:34 发布 · 80 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/JinvidLiang/archive/2012/08/10/2631528.html

本文介绍了CSSSprites技术，即CSS精灵，一种减少网页图片加载数量、提高加载速度的方法。通过实例展示了如何利用背景定位来实现图片的分割显示，并提供了预加载图片的脚本示例。

CSS Sprites也就是通常说的CSS精灵，是对网页中加载的图片的处理技术。像我们在做网站的时候，不可避免的要加载许多的图片，像一些logo、按钮等。大量的图片会使网页的加载速度大打折扣。CSS Sprites就是允许将一个页面上涉及到所有的零星图片包含到一张大的图片中。这样就降低了图片的个数，起到了加速的效果。下面通过实例来说明CSS Sprite的具体用法：

View Code 
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>无标题文档</title>
 <script type="text/javascript">
     
 </script>
 <style type="text/css">
     .img{
         background-image:url(4.jpg);
         width:660px;
         height:440px;
     }
     .sprites{
         background-image:url(4.jpg);
         width:254px;
         height:170px;
         background-position:-403px -266px;
     }
 </style>
 </head>
 
 <body>
     <div class="img"></div>
     <hr/>
     <div class="sprites"></div>
 </body>
 </html>

为了对比，我们把完整的图片也显示出来：
<div class="img"></div>
css代码：

.img{
       background-image:url(4.jpg);
       width:660px;
       height:440px;
   }。

分割一张图片，只要是使用width，height，background-position，用width和height控制图片的大小，background-position来确定要截取的部分的坐标位置。

css:

    background-image:url(4.jpg);
       width:254px;
       height:170px;
        background-position:-403px -266px;
   }

除了上述方法还可以通过预加载图像，加快图片加载，使页面有更快的感觉。

脚本如下：

<script type="text/javascript">
var image1 = new Image();
image1.src = "image1.gif";
var image2 = new Image();
image2.src = "image2.gif";
</script>

转载于:https://www.cnblogs.com/JinvidLiang/archive/2012/08/10/2631528.html