Question

我动态地向页面添加了相对大量的小图像。我发出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魔法，但它没有似乎工作。有什么我想念的吗？

Answer 1

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

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中的每个图像，但你明白了。

Answer 2

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

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

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

2 个答案: