是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。对于当前网络流行的速度而言，不高于200KB的单张图片的所需载入时间基本是差不多的，所以无需顾忌这个问题。
加速的关键，不是降低质量，而是减少个数。传统切图讲究精细，图片规格越小越好，重量越小越好，其实规格大小无所谓，计算机统一都按byte计算。客户端每显示一张图片都会向服务器发送请求。所以，图片越多请求次数越多，造成延迟的可能性也就越大。
效果演示一：
<div id="lga">
<style>
#hplogo{background:white;cursor:pointer;height:156px;position:relative;403px}
#hplogo div{pointer-events:none;position:absolute}
</style>
<div id="hplogo">
<a href="/search?q=%E7%8E%9B%E8%8E%8E%C2%B7%E8%91%9B%E5%85%B0%E5%A7%86&ct=graham11-hp&oi=ddle&hl=zh-CN"><img title="现代舞先驱玛莎·葛兰姆 117 周年诞辰" border="0" alt="现代舞先驱玛莎·葛兰姆 117 周年诞辰" src="graham11-hp-start.png"></a>
<script>
var point=[[307,48,88,89],[307,48,89,89],[307,48,91,89],[305,49,93,89],[305,50,93,88],[305,50,93,88],[306,52,92,86],[305,53,93,84],[305,54,94,83],[306,54,93,83],[307,54,92,83],[307,54,92,83],[308,54,90,83],[308,54,90,83],[306,53,91,84],[306,53,91,84],[308,53,90,84],[308,53,90,84],[305,53,92,84],[305,52,92,85],[306,52,91,85],[308,51,88,87,1],[308,50,88,88],[308,49,88,88],[307,49,89,88],[307,50,89,87],[308,51,89,86],[307,54,90,83],[307,57,90,80],[306,58,92,79],[306,58,92,79],[305,60,92,77],[302,61,95,76],[302,63,95,74],[302,51,96,86],[302,66,98,71],[304,67,96,69],[301,63,96,74],[301,58,93,79],[291,52,94,85],[288,50,71,88],[285,43,76,95],[285,37,70,101],[281,29,55,109],[278,20,58,119],[278,20,55,119,1],[277,12,121,127],[271,2,122,138],[267,1,126,139],[264,0,136,140],[260,0,141,140],[255,0,148,140],[252,0,151,140],[249,2,121,138],[247,3,123,137],[246,3,123,137],[246,2,124,137],[258,2,112,137],[263,2,106,137],[263,2,106,137],[262,2,103,137],[260,2,104,136],[260,2,104,137,1],[268,2,98,137],[267,2,99,137],[266,2,97,137],[266,3,96,136],[264,3,99,136],[263,3,100,136],[261,3,100,136],[259,2,138,137],[254,2,126,137],[247,2,101,136],[240,2,108,136],[238,1,110,137],[230,1,118,138],[220,15,128,124],[211,18,137,121],[205,43,102,96],[202,45,104,93],[200,38,97,101],[198,38,104,101,1],[197,39,107,100],[197,39,112,100],[213,39,94,110],[212,40,95,111],[211,41,97,111],[209,42,99,112],[209,43,98,112],[213,43,87,112],[213,42,83,113],[211,40,86,109],[211,38,86,103],[211,37,88,112],[211,20,186,131],[213,27,167,122],[212,44,87,105],[210,44,88,98],[195,44,106,98],[189,44,110,98],[182,46,117,99],[173,44,118,96,1],[161,43,130,99],[154,42,137,97],[153,42,137,97],[153,42,137,97],[152,41,137,98],[151,41,137,97],[149,41,145,97],[148,25,144,114],[148,13,144,126],[141,12,153,127],[115,11,173,128],[108,7,180,133],[108,4,180,136],[108,3,176,137,1],[108,1,161,139],[105,1,235,138],[103,1,295,148],[103,0,277,149],[108,0,234,137],[101,0,232,137],[99,0,135,139],[95,0,244,139],[81,0,152,139],[69,0,164,139,1],[66,0,169,139],[65,0,170,139],[63,0,168,138],[61,0,159,138],[35,0,304,139],[19,0,189,140],[18,11,138,129],[18,11,137,129],[18,11,137,128],[18,6,135,133],[7,4,146,136],[6,4,147,136],[3,4,150,136,1],[3,5,150,135],[3,8,150,132],[4,6,394,145],[12,6,388,145],[11,8,389,144],[11,8,387,144],[11,8,387,143,1],[10,8,113,131],[11,8,111,131],[10,9,112,130],[12,9,116,130],[12,9,111,130],[12,9,111,130],[12,9,110,131],[12,34,113,106],[13,35,110,104]];
var px = 0;
var py = 0;
var maxy = 0;
var i = 0;
var pointLength = point.length;
var logoInterval;
function logoAnimate(){
if(i>0){
if(point[i-1].length == 5){
px = 0;
py += maxy;
maxy = 0;
}else{
px += point[i-1][2];
}
}
maxy = maxy > point[i][3] ? maxy : point[i][3];
var eleLogo = document.createElement("div");
eleLogo.style.left = point[i][0]+"px";
eleLogo.style.top = point[i][1]+"px";
eleLogo.style.width = point[i][2]+"px";
eleLogo.style.height = point[i][3]+"px";
eleLogo.style.background = "url("2013_1.png") no-repeat "+-px+"px "+-py+"px";
eleLogo.id = "hplogo"+i;
document.getElementById("hplogo").appendChild(eleLogo);
i++;
if(i>=pointLength){
window.clearInterval(logoInterval);
}
}
logoInterval=window.setInterval("logoAnimate()",83);
</script>
</div>
</div>
效果演示2：
<!DOCUMENT HTML> <html> <head> </head> <body> <section> 截图： 1:<div style="left:100px;top:48px;90px;height:160px;background:url(Creature_BlueBoy_07.png) no-repeat scroll 0px 0px transparent;"></div> 2:<div style="left:100px;top:48px;90px;height:160px;background:url(Creature_BlueBoy_07.png) no-repeat scroll -84px 0px transparent;"></div> 3:<div style="left:100px;top:48px;90px;height:160px;background:url(Creature_BlueBoy_07.png) no-repeat scroll -168px 0px transparent;"></div> 4:<div style="left:100px;top:48px;90px;height:160px;background:url(Creature_BlueBoy_07.png) no-repeat scroll -252px 0px transparent;"></div> 5:<div style="left:100px;top:48px;90px;height:160px;background:url(Creature_BlueBoy_07.png) no-repeat scroll -336px 0px transparent;"></div> 6:<div style="left:100px;top:48px;90px;height:160px;background:url(Creature_BlueBoy_07.png) no-repeat scroll -420px 0px transparent;"></div> 7:<div style="left:100px;top:48px;90px;height:160px;background:url(Creature_BlueBoy_07.png) no-repeat scroll -504px 0px transparent;"></div> 8:<div style="left:100px;top:48px;90px;height:160px;background:url(Creature_BlueBoy_07.png) no-repeat scroll -512px 0px transparent;"></div> </section> <br /> <section> <p>动画效果1：<strong><a href="javascript:void(0)" onclick="logo_run()">点击运行</a></strong></p> <div id="hplogo" style="position: relative;"> <script type="text/javascript">// <![CDATA[ (function() { var style_info = [ [307,48,88,89,0,0], [307,48,89,89,-88,0], [307,48,91,89,-177,0], [305,49,93,89,-268,0], [305,50,93,88,-361,0], [305,50,93,88,-454,0], [306,52,92,86,-547,0], [305,53,93,84,-639,0], [305,54,94,83,-732,0], [306,54,93,83,-826,0], [307,54,92,83,-919,0], [307,54,92,83,-1011,0], [308,54,90,83,-1103,0], [308,54,90,83,-1193,0], [306,53,91,84,-1283,0], [306,53,91,84,-1374,0], [308,53,90,84,-1465,0], [308,53,90,84,-1555,0], [305,53,92,84,-1645,0], [305,52,92,85,-1737,0], [306,52,91,85,-1829,0], [308,51,88,87,-1920,0], [308,50,88,88,0,-89], [308,49,88,88,-88,-89], [307,49,89,88,-176,-89], [307,50,89,87,-265,-89], [308,51,89,86,-354,-89], [307,54,90,83,-443,-89], [307,57,90,80,-533,-89], [306,58,92,79,-623,-89], [306,58,92,79,-715,-89], [305,60,92,77,-807,-89], [302,61,95,76,-899,-89], [302,63,95,74,-994,-89], [302,51,96,86,-1089,-89], [302,66,98,71,-1185,-89], [304,67,96,69,-1283,-89], [301,63,96,74,-1379,-89], [301,58,93,79,-1475,-89], [291,52,94,85,-1568,-89], [288,50,71,88,-1662,-89], [285,43,76,95,-1733,-89], [285,37,70,101,-1809,-89], [281,29,55,109,-1879,-89], [278,20,58,119,-1934,-89], [278,20,55,119,-1992,-89], [277,12,121,127,0,-208], [271,2,122,138,-121,-208], [267,1,126,139,-243,-208], [264,0,136,140,-369,-208], [260,0,141,140,-505,-208], [255,0,148,140,-646,-208], [252,0,151,140,-794,-208], [249,2,121,138,-945,-208], [247,3,123,137,-1066,-208], [246,3,123,137,-1189,-208], [246,2,124,137,-1312,-208], [258,2,112,137,-1436,-208], [263,2,106,137,-1548,-208], [263,2,106,137,-1654,-208], [262,2,103,137,-1760,-208], [260,2,104,136,-1863,-208], [260,2,104,137,-1967,-208], [268,2,98,137,0,-348], [267,2,99,137,-98,-348], [266,2,97,137,-197,-348], [266,3,96,136,-294,-348], [264,3,99,136,-390,-348], [263,3,100,136,-489,-348], [261,3,100,136,-589,-348], [259,2,138,137,-689,-348], [254,2,126,137,-827,-348], [247,2,101,136,-953,-348], [240,2,108,136,-1054,-348], [238,1,110,137,-1162,-348], [230,1,118,138,-1272,-348], [220,15,128,124,-1390,-348], [211,18,137,121,-1518,-348], [205,43,102,96,-1655,-348], [202,45,104,93,-1757,-348], [200,38,97,101,-1861,-348], [198,38,104,101,-1958,-348], [197,39,107,100,0,-486], [197,39,112,100,-107,-486], [213,39,94,110,-219,-486], [212,40,95,111,-313,-486], [211,41,97,111,-408,-486], [209,42,99,112,-505,-486], [209,43,98,112,-604,-486], [213,43,87,112,-702,-486], [213,42,83,113,-789,-486], [211,40,86,109,-872,-486], [211,38,86,103,-958,-486], [211,37,88,112,-1044,-486], [211,20,186,131,-1132,-486], [213,27,167,122,-1318,-486], [212,44,87,105,-1485,-486], [210,44,88,98,-1572,-486], [195,44,106,98,-1660,-486], [189,44,110,98,-1766,-486], [182,46,117,99,-1876,-486], [173,44,118,96,-1993,-486], [161,43,130,99,0,-617], [154,42,137,97,-130,-617], [153,42,137,97,-267,-617], [153,42,137,97,-404,-617], [152,41,137,98,-541,-617], [151,41,137,97,-678,-617], [149,41,145,97,-815,-617], [148,25,144,114,-960,-617], [148,13,144,126,-1104,-617], [141,12,153,127,-1248,-617], [115,11,173,128,-1401,-617], [108,7,180,133,-1574,-617], [108,4,180,136,-1754,-617], [108,3,176,137,-1934,-617], [108,1,161,139,0,-754], [105,1,235,138,-161,-754], [103,1,295,148,-396,-754], [103,0,277,149,-691,-754], [108,0,234,137,-968,-754], [101,0,232,137,-1202,-754], [99,0,135,139,-1434,-754], [95,0,244,139,-1569,-754], [81,0,152,139,-1813,-754], [69,0,164,139,-1965,-754], [66,0,169,139,0,-903], [65,0,170,139,-169,-903], [63,0,168,138,-339,-903], [61,0,159,138,-507,-903], [35,0,304,139,-666,-903], [19,0,189,140,-970,-903], [18,11,138,129,-1159,-903], [18,11,137,129,-1297,-903], [18,11,137,128,-1434,-903], [18,6,135,133,-1571,-903], [7,4,146,136,-1706,-903], [6,4,147,136,-1852,-903], [3,4,150,136,-1999,-903], [3,5,150,135,0,-1043], [3,8,150,132,-150,-1043], [4,6,394,145,-300,-1043], [12,6,388,145,-694,-1043], [11,8,389,144,-1082,-1043], [11,8,387,144,-1471,-1043], [11,8,387,143,-1858,-1043], [10,8,113,131,0,-1188], [11,8,111,131,-113,-1188], [10,9,112,130,-224,-1188], [12,9,116,130,-336,-1188], [12,9,111,130,-452,-1188], [12,9,111,130,-563,-1188], [12,9,110,131,-674,-1188], [12,34,113,106,-784,-1188], [13,35,110,104,-897,-1188] ]; var logo = document.getElementById('hplogo'); function logo_run() { setTimeout( function() { var a, div; if (a = style_info.shift()) { div = document.createElement('div'); div.style.cssText = 'position:absolute;'+ 'left:'+a[0]+'px;top:'+a[1]+'px;'+a[2]+'px;height:'+a[3]+'px;'+ 'background:url("2013_1.png") no-repeat '+a[4]+'px '+a[5]+'px;'; logo.appendChild(div); logo_run(); } }, 83); }; window.logo_run = logo_run; })(); // ]]></script> </section> <br /> <section> <p>动画效果2：<strong><a href="javascript:void(0)" onclick="logo_run()">点击运行</a></strong></p> <div id="hplogo" style="position: relative;"> <script type="text/javascript">// <![CDATA[ (function() { var style_info = [ [100,48,80,160,0,0], [100,48,89,89,-82,0], [100,48,91,89,-163,0], [100,49,93,89,-249,0], [100,50,93,88,-338,0], [100,50,93,88,-428,0], [100,50,93,88,-513,0], [100,50,93,88,-597,0] ]; var logo = document.getElementById('hplogo'); function logo_run() { setTimeout( function() { var a, div; if (a = style_info.shift()) { div = document.createElement('div'); div.style.cssText = 'position:absolute;'+ 'left:'+a[0]+'px;top:'+a[1]+'px;'+a[2]+'px;height:'+a[3]+'px;'+ 'background:url("Creature_BlueBoy_07.png") no-repeat '+a[4]+'px '+a[5]+'px;'; logo.appendChild(div); logo_run(); } }, 30); }; window.logo_run = logo_run; })(); // ]]></script> <body>
