css sprites的利弊

關(guān)于這項(xiàng)技術(shù)，大的好處有下面幾個(gè)：

1，減少網(wǎng)頁加載時(shí)的http請(qǐng)求數(shù)。這種情況貌似只適用于“初次加載”之類需要重新從服務(wù)器端獲取資源的情況。但無論怎樣，對(duì)于一個(gè)流量較大或者頻繁被“重新加載”的網(wǎng)頁，還是很有用的。

2，給鏈接做背景圖時(shí)，可以防止a:hover 時(shí)再載入背景圖片而導(dǎo)致的背景“閃爍”。個(gè)人覺得這一點(diǎn)在提升用戶體驗(yàn)具有一定的意義。

3，圖片易于管理。前提是拼合的圖片有一定的規(guī)律。如下圖，就是一張“網(wǎng)站全部使用的按鈕背景”的圖片。這樣可以很直觀的看到網(wǎng)站中所有的按鈕樣 式。(我個(gè)人喜歡按照?qǐng)D片的一定“屬性”來拼圖片，一張圖片都是icon或者都是btn背景…這樣就可以順便管理圖片，且有一定規(guī) 律可循的圖片，比較容易排列在一起。當(dāng)然，有些時(shí)候，也會(huì)選擇按照“模塊”來拼合一張圖片，這樣在模塊化的結(jié)構(gòu)中，就產(chǎn)生了一個(gè)簡單的邏輯：調(diào)用一個(gè)模 塊，則調(diào)用上面的背景圖。否則，這張圖片就不被調(diào)用?？梢杂行У姆乐怪挥昧艘粋€(gè)小小的圖標(biāo)，就調(diào)用了整個(gè)大圖片的問題。)

css sprites 適用范圍：

1，需要通過降低http請(qǐng)求數(shù)完成網(wǎng)頁加速。

2，網(wǎng)頁中含有大量小圖標(biāo)?；蛘撸承﹫D標(biāo)通用性很強(qiáng)。

3，網(wǎng)頁中有需要預(yù)載的圖片。主要是a與a:hover背景圖這種關(guān)系的。如果a與a:hover的背景圖分別加載，那么，就會(huì)出現(xiàn)用戶鼠標(biāo)移到某 個(gè)按鈕上，按鈕的背景突然消失再出來，產(chǎn)生“閃爍”，如果按鈕文字色與大背景相同或相近，就更囧了，有可能讓人產(chǎn)生按鈕“消失”了的錯(cuò)覺。

需要滿足的條件

在網(wǎng)頁中，通過這項(xiàng)技術(shù)拼合在一起的圖片最好有一項(xiàng)規(guī)律。定寬或者定高。最好是寬高都能定下來。需要平鋪的圖片，顯然不適合sprite。

如上圖的buttons，就屬于定寬定高的情況。

定寬情況下，則可平行排列若干小圖片。定高，則縱向排列小圖片。

若背景既不定寬，也不定高情況下強(qiáng)行使用css sprites技術(shù)，則容易產(chǎn)生“不應(yīng)該出現(xiàn)的圖片出現(xiàn)在頁面上”的狀態(tài)。若是“強(qiáng)行定高”，也將非常不利于日后的維護(hù)。

總結(jié)

這項(xiàng)技術(shù)好與不好并不能一概而論的。要視網(wǎng)站的具體情況而定。分析時(shí)首先決定自己“是否需要”，還要綜合開發(fā)成本，維護(hù)成本等問題。找到一個(gè)適合實(shí) 際情況的方案再做定奪。及時(shí)要用sprites，建議也不要極端的將各種尺寸，各種對(duì)齊方式，各種用途圖片放在一起去維護(hù)。這樣的極端或許不能再減少幾個(gè) http請(qǐng)求數(shù)，反而為日后的維護(hù)埋下隱患。不適當(dāng)?shù)牡倪\(yùn)用反則會(huì)導(dǎo)致后期維護(hù)的麻煩。

分享名稱：csssprites用法
路徑分享：http://jinyejixie.com/news24/315424.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供自適應(yīng)網(wǎng)站、品牌網(wǎng)站設(shè)計(jì)、做網(wǎng)站、建站公司、ChatGPT、網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)