How can I optimize my routine to build HTML tiles from an array?

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?

现场演示: http ://jsfiddle.net/PrPvM/ (非常慢,可能会挂起您的浏览器)

完整代码(下载): http ://www.mediafire.com/？xvd9tz07h2u644t

片段(来自实际的数组循环):

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

设置背景图像的循环是真正的问题.看看它:你循环遍历<li>你刚从"网格"建成的所有元素.然后,在该循环内 - 也就是说,对于每个 <li>元素 - ,您将遍历整个 "网格"数组并重置背景.每个节点最终都会被设置为完全相同的东西:背景中对应于阵列中最后一个东西的背景一遍又一遍地反映到完全相同的背景.

构建HTML的方式也非常低效.您应该遍历网格并构建一个字符串数组,<li>每个数组插槽中都有一个元素.实际上,现在我想起来了,你真的应该同时做第一个和第二个循环.

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(''));
}

现在你还需要一些CSS规则:

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