在頁面中動態添加大量圖像，並在后台加載

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標簽指定width / height屬性，則可以“免費”獲得此類占位符，而不必訴諸某些復雜的DHTML / javascript向導，但這似乎不起作用。 我有什么想念的嗎？

Answer 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添加每個圖像，但是您明白了。

Answer 2

我不知道您的應用程序中到底發生了什么，我想您可以在javascript中使用onload事件來完成此工作，例如：

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