2012-07-09 52 views
2

的條件:延遲加載或巨大的CSS精靈(大小爲9MB)

  • 這是一個電影網站有大約1000的所有圖像的15KB

  • 大約70%的圖像將被裝上一次頁面訪問

  • 圖像將有一個很長的失效日期。

我想我會選擇CSS-sprites,因爲大多數圖片都會被訪問者以任何方式加載。但所有圖像的CSS-sprite都是9MB和15000x2000像素。即使我把它分成3個精靈它是3MB:S

也許這樣的大精靈會導致一些問題?

瀏覽器會緩存圖像,即使它們是3-9MB?

大像素尺寸是否會成爲瀏覽器的問題?

延遲加載或CSS-sprite,我應該選擇什麼?

請指教!

+1

CSS spirites旨在提高性能......不考慮10 MB圖像的情況。第一次它會真的拖累。在這種情況下,我認爲懶加載會幫助你更好。或者如果你仍然想要做精神病,你可以按發生概率將精神分組。 – 2012-07-09 13:36:55

回答

0

是的,這會導致問題:

  • 由於精靈的大小和尺寸,它會顯著消費CPU供電
  • ,如果你經常使用它在一個頁面上,甚至有可能降低滾動和至少DOM操作操作
  • 9MB太大,您是否有鏈接到該精靈?

瀏覽器會緩存它,如果標頭設置正確,這是沒有問題的

而且你不想加載9MB雪碧是強制性的網站!手機?!?!!

Gekkstah

+0

有些情況下,9MB精靈將被視爲罰款。我已經看到大概40MB的精靈......例如這個網站:http://middle-earth.thehobbit.com/ – vsync 2013-12-26 22:26:04