0

我正在使用 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>") ;
    }
}

如您所见，我使用它附加了一个新类，它的背景图像设置为适当的图像 url（这就是 Type 的意思）。这在 localhost 上效果很好，但是当我在网站上运行它时，我发现图像没有加载。

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

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

有没有人有一个更好的方法来一起做这一切的建议？

4

1 回答 1

0

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

至于它不工作，你得到什么错误？您在 Chrome 开发工具的网络选项卡中看到了什么图像请求？

于 2013-07-11T02:39:52.360 回答