Javascript 动态地向页面添加大量图像，在后台加载

我正在动态地向页面添加相对较多的小图像。我发出一个XMLHTTP请求，返回表单中的一些JSON数据

{images:[
  {url:'/image?id=1',
  width:32,
  height:32,
  label:"Foo"},
  {url:'/image?id=2',
  width:32,
  height:32,
  label:"Bar"},
  ....
]}

然后，我构建表单的一些HTML

<ul>
  <li><img src="/image?id=1" width="32" height="32"> Foo</li>
  <li><img src="/image?id=2" width="32" height="32"> Bar</li>
  ...
</ul>

福
酒吧
...

并使用

innerHTML

属性将该内容添加到页面中

问题是，在加载所有图像之前，内容似乎不会出现。因为我处理的图像数量相对较多，所以我希望看到文本内容首先出现，并伴有占位符图像，您通常在加载浏览器页面时会看到这些图像。然后，在加载图像时，它们只是代替占位符出现，而不需要重新布局整个页面

---

我的印象是，如果我为

img

标记指定宽度/高度属性，我将“免费”获得这样的占位符，而不必求助于一些复杂的DHTML/javascript向导，但它似乎不起作用。我缺少什么吗？

奇怪的是，它们的图像没有异步加载。也许您可以尝试使用DOM函数而不是innerHTML创建HTML。例如（未经测试）：

我在过去也用图像做过类似的事情，它们总是像预期的那样工作

---

您必须使用一个循环来添加JSON中的每个图像，但是您知道了。

奇怪的是，这些图像没有异步加载。也许您可以尝试使用DOM函数而不是innerHTML创建HTML。例如（未经测试）：

我在过去也用图像做过类似的事情，它们总是像预期的那样工作

---

您必须使用一个循环来添加JSON中的每个图像，但是您知道了。

我不知道您的应用程序中到底发生了什么，我认为您可以使用javascript中的onload事件来完成这项工作，例如：

<img src="example.png" onload="loadImage;" />
....
function loadImage ()
{
    // here to load the next image, and insert it into DOM
}

....
函数loadImage（）
{
//在此处加载下一个图像，并将其插入DOM
}

我不知道您的应用程序中到底发生了什么，我认为您可以使用javascript中的onload事件来完成这项工作，例如：

<img src="example.png" onload="loadImage;" />
....
function loadImage ()
{
    // here to load the next image, and insert it into DOM
}

....
函数loadImage（）
{
//在此处加载下一个图像，并将其插入DOM
}