如何讀取圖像的塊？

Question

很多很多網站使用這種技術（Facebook，谷歌也一樣）

例如，打開facebook.com

保存該頁面（而不是* .MHTM但HTML與圖像）（平均登錄頁面）

它節省：

facebook_files（DIR） facebook.html（文件）

然後裏面的文件夾，可以看到哪些containts所有主圖像用於p一個GIF文件年齡。

問題是：如何閱讀一個文件中的很多塊？ 以及如何調用這種方法？

Answer 1

這些圖像被稱爲「精靈」。看看他們的this article。

基本思想是，無論何時你想使用精靈圖像，你都有一個只顯示大精靈圖像一部分的元素。因此，您網頁中的每個「圖片」實際上都是一張div，此圖片作爲背景，正好抵消，因此右側部分顯示。

主要優點是您的頁面需要更少的請求，因此加載速度更快。

網上有一些工具可以讓使用精靈更容易。我沒有使用過任何一個，所以不能推薦一個，但使用一個工具會爲您節省很多工作。

Answer 2

這就是你所說的「spriting」，就像街機遊戲中使用的spriting（一個角色的不同位置）。基本上它是包含較小圖像的一大塊圖像。

這種方法的好處是，你不需要100個不同的HTTP請求100個小gif（這會導致開銷），你只需要請求一個包含這100個gif的巨大圖像。然後，您不必使用每張圖片的<img>，而是使用CSS background，然後使用background-position將正確的圖像「通過」容器對齊以顯示正確的圖像。