javascript - javascript: JSON を解析して、背景画像がプリロードされた新しいクラスを作成する

Question

私は MVC4 を使用してブラウザー ゲームを開発しており、今夜初めて自分の Web サイトに展開することができました。localhost からサイトを実行することと、Web サイトからサイトを実行することの違いをざっと調べています。

今、私が最初に行うことは、ページ上のすべての静的コンテンツ (ナビゲーション バー、アイコン、世界地図、およびそれを操作するための基本的な JavaScript) をロードすることです。次に、都市とその x、y 座標、名前、小さな旗のアイコンなど、2D マップ上のさまざまな要素に関する情報を返す 4 つの AJAX 関数を呼び出します。

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

ご覧のとおり、background-image を適切な画像 URL に設定した新しいクラスを追加します (これが Type の意味です)。これはローカルホストではうまく機能しますが、ウェブサイトで実行すると、画像が読み込まれないことがわかりました。

ここでどのように進めればよいかよくわかりません。小さな画像要素 (それぞれ別のファイル) がたくさんありますが、すべてが使用されるという保証はないため、それらをすべて読み込むのは無駄です。この場合、どのような解決策がよいでしょうか？私が考えていたのは、画像ファイルが使用されるJSONデータを返し、それらを使用するクラスを作成する前にJavaScriptを介してそれらの画像をプリロードすることです。

なぜこれはサーバーで発生し、ローカルホストでは発生しないのですか? localhost でリロードする前にキャッシュをクリアしても、この問題は再現されません。すべてのファイルが既にハード ドライブにあるため、ダウンロードする必要がないからですか?

これをすべて一緒に行うためのより良い方法についての提案はありますか?