Question

我正在使用MVC4开发一款浏览器游戏，并且今晚能够第一次部署到我的网站。我正在忽略从localhost运行站点和从网站运行它之间的差异。

现在，我要做的第一件事就是加载页面上的所有静态内容 - 导航栏，图标，世界地图和一些与之交互的基本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>") ;
    }
}

正如您所看到的，我添加了一个新类，其背景图像设置为相应的图像URL（这就是Type的含义）。这在localhost上运行得很好，但是当我在网站上运行时，我发现图像没有加载。

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

为什么会在服务器上发生，而不是localhost？在localhost上重新加载之前清除缓存不会重新创建此问题。是因为没有必要下载，因为所有文件都已经在你的硬盘上了吗？

有没有人建议更好地共同完成这项工作？

Answer 1

更好的选择可能是使用单个image sprite作为每个图块的背景图像。使用Type作为类名，并在CSS中设置背景x，y定位。单个图像将具有较大的文件大小，但它将是一个可以轻松缓存的单个请求。

至于它不起作用，你得到了什么错误？您在Chrome开发工具的网络标签中看到了哪些图片请求？

javascript：解析JSON以创建预加载了background-image的新类

1 个答案: