Question

As my last question was closed for being “too vague” – here it is again, with better wording.

I have a “grid” of li‘s that are loaded dynamically (through JavaScript/jQuery), the Array isn’t huge but seems to take forever loading.

So, SO people – my question is:
Am I being stupid or is this code taking longer than it should to execute?

Live demo: http://jsfiddle.net/PrPvM/
(very slow, may appear to hang your browser)

Full code (download): http://www.mediafire.com/?xvd9tz07h2u644t

Snippet (from the actual array loop):

var gridContainer = $('#container');
    var gridArray = [ 
        2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
        2,2,2,2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
        0,0,0,2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
        0,0,0,2,2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
        0,0,0,0,2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
        0,0,0,0,2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
        0,0,0,0,2,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
        0,0,0,0,2,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0
    ];

    function loadMap() {
        var i = 0;
        while (i <= gridArray.length) {
            var gridHTML = $(gridContainer).html();
            $(gridContainer).html(gridHTML+'<li class="node"></li>');
            i++;
        }
        $('li.node').each(function() {
            $(gridArray).each(function (i, val) {
                if (val == '0') { gridTile = 'grass.jpg' };
                if (val == '1') { gridTile = 'mud.jpg' };
                if (val == '2') { gridTile = 'sand.gif' };
                $($('ul#container :nth-child('+i+')'))
                  .css({ 'background-image': 'url(img/tiles/'+gridTile });
            });
        });
    }

Answer 1

The loop where you set the background images is the real problem. Look at it: you’re looping through all the <li> elements that you just got finished building from the “grid”. Then, inside that loop — that is, for each <li> element — you go through the entire “grid” array and reset the background. Each node will end up being set to the exact same thing: the background corresponding to the last thing in the array over and over again to the exact same background.

The way you build the HTML is also very inefficient. You should loop through the grid and build up a string array with an <li> element in each array slot. Actually, now that I think of it, you really should be doing the first and second loops at the same time.

function loadMap() {
  var html = [], bg = ['grass', 'mud', 'sand'];
  for (var i = 0, len = gridArray.length; i < len; ++i) {
    html.push("<li class='node " + bg[gridArray[i]] + "'></li>");
  }
  $(gridContainer).html(html.join(''));
}

Now you’ll also need some CSS rules:

li.grass { background-image: url(grass.jpg); }
li.mud { background-image: url(mud.jpg); }
li.sand { background-image: url(sand.gif); }