动态添加大量图片到页面，在后台加载答案

【问题标题】：Dynamically adding a large number of images to a page, loading in the background动态添加大量图片到页面，在后台加载
【发布时间】：2011-03-15 02:25:00
【问题描述】：

我正在向页面动态添加相对大量的小图像。我发出一个 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 魔法，但事实并非如此似乎工作。有什么我遗漏的吗？

【问题讨论】：

标签： javascript image dom dhtml

【解决方案1】：

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

var ul = document.createElement("ul");
var li = document.createElement("li");
var img = document.createElement("img");
var textNode = document.createTextNode("Foo");

img.src = "/image?id=1";
img.width = 32;
img.height = 32

li.appendChild(img);
li.appendChild(textNode);    
ul.appendChild(li);

document.body.appendChild(ul);

我过去对图像做过类似的事情，它们总是按预期工作。

您必须使用循环从 JSON 添加每个图像，但您明白了。

【讨论】：

【解决方案2】：

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

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

【讨论】：