在線客服

24小時免費咨詢電話：18978941786

客服時間：上午9：30~下午6點

當(dāng)前位置：首頁>> 技術(shù)文章 >> Web標(biāo)準(zhǔn) >> CSS Sprites，圖片切割與優(yōu)化技術(shù)

CSS Sprites，圖片切割與優(yōu)化技術(shù)

收藏分享發(fā)布日期:2012-2-12 16:30:40 編輯:admin 文章來源: 點擊率:

2005 年的時候 CSS 禪意花園 (CSS Zengarden) 的園主 Dave Shea 對 CSS Sprites 技術(shù)的作過詳細(xì)介紹。CSS Sprites 技術(shù)提倡把所有背景圖片合并到一個圖片文件中，并使用 CSS 的 background-image 和 background-position 屬性來定位和調(diào)用。

這種方法看似繁瑣，但卻是非常有實用價值的。

首先，CSS Sprites 能較少 HTTP 請求次數(shù)。
我們知道，HTTP 請求數(shù)對網(wǎng)站的工作性能有較大關(guān)聯(lián)。如果背景圖分開存放，每一次調(diào)用都會產(chǎn)生 HTTP 請求，一定程度上增加了服務(wù)器的負(fù)擔(dān)。而單個背景圖的設(shè)計方法，只需請求一次即可取回背景圖片。很多大型網(wǎng)站，包括雅虎，新浪等，都采用了 CSS Sprites 技術(shù)。

其次，CSS Sprites 能防止背景圖片延遲加載。
有時在點擊以圖片作背景的按鈕時會發(fā)現(xiàn)，鼠標(biāo)懸停的時刻才會觸發(fā)瀏覽器下載背景圖片，這是非常差勁的用戶體驗。但如果將圖片存放與單個文件，就能避免延遲加載。因為在打開網(wǎng)頁的首次請求中，圖片已經(jīng)加載完畢。

然而，使用單個圖片文件存放的方法會降低可維護(hù)性。而且圖片的定位比較繁瑣，缺乏靈活性。在雅虎開發(fā)小組的 YUI 產(chǎn)品中，采用了加大圖片距離的方法，同時也增加了圖片的體積。

總之，CSS Sprites 有利也有弊。在追求性能的前提下，CSS Sprites 是值得推廣的網(wǎng)頁設(shè)計方法。

本文章由南寧網(wǎng)站建設(shè)、南寧網(wǎng)站優(yōu)化、南寧網(wǎng)絡(luò)公司整理，轉(zhuǎn)載請注明出處：http://www.absorbed3d.com/

南寧煙寒網(wǎng)絡(luò)竭誠為您免費提供南寧網(wǎng)站建設(shè)、南寧網(wǎng)站設(shè)計、南寧網(wǎng)站優(yōu)化、維護(hù)以及網(wǎng)站技術(shù)很方面的網(wǎng)絡(luò)服務(wù)！

南寧網(wǎng)站建設(shè)、南寧網(wǎng)絡(luò)公司咨詢熱線電話：0771-5306126 18967841786(24小時全天電話)

煙寒網(wǎng)絡(luò) - 讓你進(jìn)一步走向成功

国产高清一区二区在线_免费看肥胖女人做爰高清全过情_日韩少妇高潮抽搐_性生生活大片又黄又_粉嫩蜜臀av国产精品网站_搞黄视频免费_亚洲成a人一区二区三区_屁股翘起来趴好挨c_少妇一夜爽免费看_日本护士高潮大叫

在線客服

CSS Sprites，圖片切割與優(yōu)化技術(shù)

CSS Sprites，圖片切割與優(yōu)化技術(shù)