Question

我想要图像来表示字段，我需要很多图像。

让我们说我需要10 x 10个字段。关于这一点的好处是所有图像都很小，并且只有大约3个不同颜色的图像一次又一次地使用。

我的jQuery代码需要很长时间才能完成，所以我确信我做错了什么。有什么更有效的方法来做同样的事情？

 for(y = 1; y <= 10; y++) {

      for (x = 1; x <= 10; x++) {

        var imgId = "imgXY"+ "_" + x + "_" + y;

        console.log("appending " + imgId);

        $('#game').append('<img id="'+ imgId + '" src="gray.png" />');
        //some positioning and css code

      }
}

Answer 1

Actor

这样，#game只需要搜索一次，只有一次调用更新DOM内容。

Answer 2

看起来你在这里制作了一个包含100个图像的网格，每次都插入到DOM中。

DOM操作非常慢，因此您可以在此处进行优化，首先计算所有元素，然后在最后一刻将.append()放到#game元素上。

这可能类似于：

var html = "";
for(y = 1; y <= 10; y++){
  for (x = 1; x <= 10; x++) {
    var imgId = "imgXY"+ "_" + x + "_" + y;
    html += '<img id="'+ imgId + '" src="gray.png" />';
   }
}
$('#game').append(html);

如何使jQuery更有效地附加imgs？

2 个答案: