最開始的時候,圖片都是一張一張單獨存在,需要哪張,就發送http請求來調用,隨著時間的推移,background-position的應用,又興起了css-sprite這種技術,一時之間大家都在盲目跟風,認為不這樣做就不夠專業,或者技術不夠好等。
css-sprite是把所有用於網頁背景的圖片,拼合在一張大圖之內,然後通過背景圖定位的方法,來控制顯示自己需要的那張圖。但是不是所有的圖片都適用css-sprite,例如網頁內的圖片,或者是需要重復平鋪的圖片。並且,這種大圖一旦合並以後,如果以後再要修改其中的某一個圖片,就要牽一發而動全身,如果只是簡單顏色改變,或許還稍微容易一些,但是如果大圖內的某些元素的尺寸變化了,就需要重新進行合並了,並且可能會導致其他圖片的位置發生變化,從而演變成調整一個圖片,還要同時調整大圖內的其余圖片,並且要調整css的background-position的數值。
並不是說css-sprite技術不好,只是什麼時候需要用,什麼時候不需要用,不能夠一概而論的跟風,看人家網易用了,你也用!
css-sprite適用的條件:
1.網站的開發已經完畢,包括功能,模塊,交互,程序,都已經反復測試,就差發布;
2.網站已經趨於完美,不會再三天兩頭的改動,不能說今天上線了,明天覺得按鈕太小了,要調整,後天覺得按鈕太大了要調整;
3.你的網站流量很大,需要盡量減少http的請求次數;
css-sprite也並不是像看起來那麼簡單的,只是單一的把圖片拼合在大圖上那麼簡單,首先你應該考慮,那些圖片是需要每個頁面都要引入的,這些圖片可以拼合到一張大圖中,而那些只有個別頁面才需要調用的圖片,則不適合也加在大圖裡面,否則你的http請求次數的確是小了,但是某些圖片其實在某些頁面是不需要用到的,但是你放在一張大圖裡面,用戶還是需要去加載,造成了網速的負擔。
另外,對於一些小公司,做一個產品沒有一個合理的構思甚至框架,想到哪裡就讓人去做,想一步做一步,做一步改一步,改完一步,再改一步,改來改去沒有最終敲定的,這個時候如果一開始就使用css-sprite拼合圖片,無疑給自己造成了巨大的困擾,增加了許多的工作量。所以最好是,等到產品已經完全敲定,測試沒有問題,可以上線發布了,再去拼合圖片。