javascript：解析JSON以創建具有預加載背景圖像的新類

我正在開發使用MVC4的瀏覽器遊戲，並且已經能夠在今晚第一次部署到我的網站。我正在通過運行本地主機的網站和從網站運行網站之間的差異晃動。javascript：解析JSON以創建具有預加載背景圖像的新類

現在我要做的第一件事就是加載頁面上的所有靜態內容 - 導航欄，圖標，世界地圖和一些基本的JavaScript來與它們進行交互。然後，我調用四個AJAX函數，返回有關我的二維地圖上各種元素的信息，例如城市及其x，y座標，名稱和小標誌圖標。

完成AJAX功能後，我開始解析返回的JSON。對於在JSON的每個項目，我添加了一個新的20×20像素級使用這樣的代碼：

function loadSuccessCityTiles(data) { 
    var cityTiles = jQuery.parseJSON(data); 
    var cityTileCount = cityTiles.length; 

    $(".CityTile").remove(); 

    for (var i = 0; i < cityTiles.length; i++) { 
     var imgName = "../Images/City_Tiles/Small/" + cityTiles[i].Type + ""; 
     $("#scrollWindow").append("<div class = 'CityTile' style = 'left: " + Math.floor(cityTiles[i].X)*tileSize + "px; top: " + Math.floor(cityTiles[i].Y)*tileSize + "px; background-image: url(" + imgName + ");'></div>") ; 
    } 
}

正如你所看到的，我使用有其背景圖片設置爲適當的圖像URL（添加一個新的類這就是Type的含義）。這對localhost非常有用，但是當我在網站上運行它時，我發現圖片無法加載。

我不太清楚如何在這裏繼續。我有很多小的圖像元素（每個都在單獨的文件中），並不能保證所有的都會被使用，所以加載它們都是浪費的。在這種情況下什麼是一個好的解決方案？我想過的一個想法是返回將使用圖像文件的JSON數據，然後在創建將使用它們的類之前通過javascript預先加載這些圖像。

爲什麼在服務器上發生這種情況而不是本地主機？在本地主機上重新加載之前清除緩存不會重新創建此問題。是否因爲不需要下載，因爲所有文件都已經在您的硬盤上？

有沒有人有更好的方法來做到這一切的建議？

來源

2013-07-11 user1433070

更好的選擇可能是使用單個image sprite作爲每個圖塊的背景圖像。使用Type作爲類名，並設置CSS中的背景x，y的位置。單個圖像將具有較大的文件大小，但它將是一個可輕鬆緩存的單個請求。

至於它不工作，你會得到什麼錯誤？您在Chrome開發工具的網絡標籤中看到了哪些圖片請求？

來源

2013-07-11 02:39:52

該網站本身是[鏈接]（http://ekleinstudio.com/world/）。我不像Firefox那樣熟悉Chrome，但是我在圖像上使用Firebug的錯誤不會加載的是「無法加載givenURL」，儘管我可以通過訪問圖像文件自己導航到它。服務器。您可以通過搜索「CityTile」和「City_Palace」類來跳到提及的課程。 – user1433070

加載的地圖圖像位於/world/Images/BigMapTest.bmp。我可以通過預先加載*/world */images/City_Tiles/Small/House_Poor.png來加載其他圖像。你有錯誤的路徑嗎？ –

事實證明，我的主機不允許用戶上傳到根目錄。因此，我確實錯過了URL的「世界」部分，儘管在本地主機上不需要額外的文件夾，事實上會破壞它。我愚蠢的是，CSS文件中定義的圖像工作正常，正如我後來知道的那樣，是因爲CSS表中的所有內容都是相對於它自身的，但腳本與託管根相關。所以是的，你確實是對的，雖然我似乎有一個單獨的頭痛來處理:( – user1433070

javascript：解析JSON以創建具有預加載背景圖像的新類

回答

相關問題