javascript：解析JSON以创建预装背景图像的新类

我正在开发一款使用MVC4的浏览器游戏，今晚第一次能够部署到我的网站上。我正在仔细研究在本地主机上运行站点和在网站上运行站点之间的区别

现在我要做的第一件事就是加载页面上的所有静态内容——导航栏、图标、世界地图和一些与之交互的基本javascript。然后，我调用了四个AJAX函数，它们返回有关2d地图上各种元素的信息，例如城市及其x、y坐标、名称和一个小标志图标

完成AJAX函数后，我开始解析返回的JSON。对于JSON中的每个项目，我使用如下代码添加一个新的20x20像素类：

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>") ;
    }
}

函数加载成功实例（数据）{
var cityles=jQuery.parseJSON（数据）；
var citylecount=cityles.length；
$（“.cityle”）.remove（）；
对于（变量i=0；i

如您所见，我使用将其背景图像设置为适当的图像url（这就是类型的含义）的方法附加了一个新类。这在localhost上非常有效，但是当我在网站上运行它时，我发现图像无法加载

我不太清楚如何继续进行。我有很多小的图像元素（每个都在单独的文件中），并且不能保证所有的元素都会被使用，所以将它们全部加载是浪费。在这种情况下，什么是好的解决方案？我的一个想法是返回将使用哪些图像文件的JSON数据，然后在创建使用这些图像的类之前通过javascript预加载这些图像

为什么这种情况发生在服务器上而不是本地主机上？在本地主机上重新加载之前清除缓存不会重新出现此问题。是因为所有的文件都已经在你的硬盘上了，所以不需要下载吗

---

有没有人对一种更好的方法有什么建议？

一个更好的选择是使用一张图片作为每个磁贴的背景图像。使用类型作为类名，并在CSS中设置背景x、y位置。单个映像将具有较大的文件大小，但它将是一个可以轻松缓存的单个请求

---

至于它不工作，你有什么错误？在Chrome dev tools的“网络”选项卡中，您看到了什么图像请求？

站点本身就是。我对Chrome的熟悉程度不如Firefox，但我在使用Firebug时遇到的错误是“无法加载Givenul”，尽管我可以通过访问图像文件直接从服务器导航到它。通过搜索“CityTile”和“City_Palace”类，您可以跳到提到的类。加载的地图图像位于/world/Images/BigMapTest.bmp。我可以通过预编*/world*/images/City\u Tiles/Small/House\u Poor.png加载其他图像。你只是有错误的路径吗？事实证明，我的主机不允许用户上传到根目录。因此，我确实遗漏了URL的“世界”部分，尽管在本地主机上不需要额外的文件夹，事实上会破坏它。愚弄我的是CSS文件中定义的图像工作得很好，正如我后来了解到的，这是因为CSS表中的所有内容都是相对于自身的，而脚本是相对于宿主根的。因此，是的，你确实是对的，尽管我似乎有一个单独的头痛要处理：(