javascript: parsing JSON to create new classes with background-image preloaded

Question

I am developing a browser game using MVC4 and have been able to deploy to my website for the first time tonight. I'm sloshing through the differences between running the site off of localhost and running it from the website.

Right now the first thing I do is load all of the static content on the page--navigation bars, icons, the world map, and some basic javascript to interact with it. Then, I call four AJAX functions that return information about various elements on my 2d map, such as cities and their x,y coordinate, name, and a small flag icon.

Upon completing the AJAX function I begin to parse the JSON returned. For each item in the JSON, I add a new 20x20 pixel class using code like this:

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

As you can see, I append a new class using that has its background-image set to the appropriate image url (that is what Type means). This works great on localhost, but when I run it on the website I discover that the images don't load.

I'm not quite sure how to proceed here. I have a lot of small image elements (each in separate files) and there is no guarantee that all will be used, so it is wasteful to load them all. What would be a good solution in this case? One thought I have had is to return JSON data on which image files will be used and then preload those images via javascript all before creating the classes that will use them.

Why does this happen on the server but not localhost? Clearing my cache before reloading on localhost does not recreate this problem. Is it because there is no need for a download as all the files are already on your hard drive?

Does anyone have a suggestion on a better way to do this all together?

Answer 1

A better option could be to use a single image sprite as a background image for each tile. Use the Type as a class name, and set the background x,y positioning in CSS. The single image will have a large file size, but it will be a single request that could easily be cached.

As for it not working, what errors are you getting? What do you see in the network tab in Chrome dev tools for the image request?