爲JavaScript遊戲顯示卡片圖像的最有效方法

Question

如果我有一些用於Javascript遊戲的卡片圖像，那麼顯示這些圖像的最有效方法是什麼？
最好是用相同的圖像URL創建一個新對象嗎？
我應該預先加載所有圖像，然後隱藏它們並克隆圖像對象的實例嗎？
還有其他方法嗎？

Answer 1

• 當然是預加載它們。
• 儘可能使用精靈，例如，您可以將每件套裝加載到一張圖像中。然後你可以加載每張卡作爲div的背景。
• 只要您從相同的URL加載圖像。瀏覽器應使用客戶端本地緩存文件，而不是從服務器請求。
• 克隆應該很好，但它必須是一個深層克隆，否則操縱一個克隆會影響所有其他克隆。

Answer 2

我選擇的選項叫做CSS Spriting。基本上你所做的是將所有圖像合併成一個大圖像，然後通過設置width和left屬性，使用CSS來顯示所需的圖像。優點是所有的圖像都是一次加載的，因爲它只是一個大圖像。

Answer 3

至於最有效的方式來顯示它們：可能替換通用img元素的「src」屬性。 至於預加載：可能是一個好主意。所有你需要做的預加載圖像就像

var preloadImg = new Image(); 
preloadImg.src = "blah"; 

它加載它到緩存中，你很好去。

Answer 4

這是一個好主意，它們全部預加載，因此即使在第一次請求時，它們也會毫不遲延地顯示出來。確保他們緩存在用戶身邊。

你有沒有想過爲你的圖像使用CSS-Sprite？這可能會加快速度，因爲您不必爲52張不同的圖片請求標題。您可以將13張牌放在一排，每張牌上有4排牌，然後對每張牌相應地調整background-position，並且您可以保證一旦一張牌加載完畢，他們全部都已裝載。