建站
咨詢(xún)
售后
建站咨詢(xún)
新聞中心
眾所周知，減少網(wǎng)站加載時(shí)間的最有效的方式之一就是減少網(wǎng)站的HTTP請(qǐng)求數(shù)。實(shí)現(xiàn)這一目標(biāo)的一個(gè)有效的方法就是通過(guò)css Sprites——將多個(gè)圖片整合到一個(gè)圖片中，然后再用CSS來(lái)定位。
創(chuàng)新互聯(lián)公司"三網(wǎng)合一"的企業(yè)建站思路。企業(yè)可建設(shè)擁有電腦版、微信版、手機(jī)版的企業(yè)網(wǎng)站。實(shí)現(xiàn)跨屏營(yíng)銷(xiāo)，產(chǎn)品發(fā)布一步更新，電腦網(wǎng)絡(luò)+移動(dòng)網(wǎng)絡(luò)一網(wǎng)打盡，滿(mǎn)足企業(yè)的營(yíng)銷(xiāo)需求！創(chuàng)新互聯(lián)公司具備承接各種類(lèi)型的成都做網(wǎng)站、成都網(wǎng)站建設(shè)項(xiàng)目的能力。經(jīng)過(guò)十多年的努力的開(kāi)拓，為不同行業(yè)的企事業(yè)單位提供了優(yōu)質(zhì)的服務(wù)，并獲得了客戶(hù)的一致好評(píng)。
下面是一張樣圖：
本文的目的并不是講 css Sprite如何讓一個(gè)網(wǎng)站更快，而是說(shuō)一些使用CSS Sprite的時(shí)候的一些最佳實(shí)踐。
不要等到你完成切片之后才開(kāi)始sprite
如果你邊切圖邊寫(xiě)css，然后等你完成了整個(gè)網(wǎng)站之后再來(lái)拼接這些圖片到一個(gè)Sprite中，你就不得不完全重寫(xiě)你的CSS，你也必須要花費(fèi)很多的時(shí)間來(lái)用PS拼接大量的圖片——這是件令人倍感糾結(jié)的事情。但是如果邊切圖邊整合，就會(huì)比較容易些。
把圖片放到它要顯示的地方的相對(duì)的地方
這個(gè)小技巧貌似比較難理解。我直到創(chuàng)建一個(gè)比較大的sprite的時(shí)候才理解到這一點(diǎn)。比如，如果我們希望一個(gè)圖片出現(xiàn)在一個(gè)元素的左側(cè)：
將那個(gè)圖片放到sprite圖片的右邊(本文開(kāi)始的那個(gè)sprite圖片)。這樣的話(huà)，當(dāng)你通過(guò) css移動(dòng)背景圖片的位置的時(shí)候，基本上不可能有其它的小圖片意外的出現(xiàn)在它的附近。使用Sprite的時(shí)候常常遇到的一個(gè)問(wèn)題是圖片會(huì)出現(xiàn)在它不該出現(xiàn)的位置。
定位時(shí)避免使用bottom或right等
當(dāng)使用css sprite的時(shí)候，只用background-position: bottom -300px或background-position: right -200px;非常容易。這剛開(kāi)始的時(shí)候是可行的，但是問(wèn)題是，當(dāng)你在寬度上或高度上擴(kuò)展相關(guān)sprite圖片的時(shí)候，原先設(shè)置的位置可能是錯(cuò)的，因?yàn)槟莻€(gè)圖片已經(jīng)不再Sprite圖片的底部或右部了。使用確切的位置來(lái)避免這個(gè)問(wèn)題。
給每個(gè)圖片足夠的空間
就像你在本文頂部的實(shí)例圖片看到的那樣，那些小圖片都被預(yù)留了足夠的空間。為什么不把他們?nèi)揭粔K來(lái)讓sprite圖片更小呢？ 因?yàn)槭褂眠@些圖片的元素通常都會(huì)有大量的內(nèi)容而且可能會(huì)需要擴(kuò)展的間距，以至于其它圖片不會(huì)意外出現(xiàn)。
例子：
例子中的每個(gè)條目都有個(gè)帶數(shù)字的圖片作為背景圖片。如果你仔細(xì)看了上面的那張圖片，你可以看到這三個(gè)數(shù)字圖片是如何錯(cuò)開(kāi)排列的，這樣如果內(nèi)容增多，其它圖片就不會(huì)意外出現(xiàn)。
不用擔(dān)心Sprite圖片的像素大小
如果你的網(wǎng)站經(jīng)過(guò)良好的設(shè)計(jì)，那么你將會(huì)有一大堆的圖片來(lái)整合進(jìn)到sprite里面，這樣你就需要你個(gè)非常大的sprite來(lái)恰當(dāng)?shù)姆胖眠@些圖片。這是很不錯(cuò)的。sprite里的空白不會(huì)占用太多的文件大小。 addons.mozilla.org上使用的Sprite圖片 有1,000px×2,000 px那么大，但是圖片的大小僅僅16.7kb!
分享標(biāo)題：通過(guò)CSSSprites實(shí)現(xiàn)減少網(wǎng)站加載時(shí)間
分享URL：http://www.dlmjj.cn/article/dpooees.html
