這張圖片在客戶端如何切片？

Question

當您通常在Web瀏覽器內的網頁上顯示的圖像上單擊右鍵時，會出現一個菜單項「圖像另存爲」的上下文菜單。

但是，如果您右鍵單擊某些網站上的某些圖像，則上下文菜單不會顯示指示該圖像爲一個圖像的項目。相反，它會顯示「查看背景圖像」。

如果您查看背景圖像，事實證明，該Web應用程序具有一個已緩存的合成圖像，然後可能在客戶端，它將該圖像切分並將其分成單獨的標籤。

例如，如果你去堆棧交易所作家網站上的任何線索，像這樣的：

https://writers.stackexchange.com/questions/3102/how-can-i-make-a-story-bigger

而且在Facebook上的圖標上單擊右鍵，查看背景圖像，你這一形象：

http://cdn.sstatic.net/Skins/sketchy/img/sprites-beta.png?v=2

同樣，如果你去一個網站，有shareThis小部件，像這樣：

http://sathyaish.net/

在極端的右上角，有這個shareThis widget圖片。如果您在圖像上單擊鼠標右鍵，查看背景圖像，它看起來像這樣：

http://w.sharethis.com/share4x/images/service-icons-sprite.png

1）我想知道什麼樣的技術來實現這一點，請問有什麼可以學習做呢？

2）其次，我該如何成爲優秀的JavaScript？我如何學習所有這些技巧？我應該開始閱讀哪本書，這將使我擅長JavaScript？

Answer 1

看到這兩個圖像網址中的詞「sprite」？這就是你在looking for。

不幸的是，該技術通常用於內容圖像 - 將性能放在正確的HTML上。

Answer 2

雖然你可以在CSS精靈一般的教程（如昆汀指出的），你也可能要檢查GWT ImageBundle Design doc裏面詳細介紹了想法如何納入谷歌Web工具包