向頁面動態添加大量圖片，在後臺加載

我在頁面上動態添加了大量小圖片。我把它返回表格的一些JSON數據向頁面動態添加大量圖片，在後臺加載

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

我再構造形式

<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>

的一些HTML和使用innerHTML屬性的內容添加到頁面中的XMLHTTP請求。

問題是內容似乎並沒有出現，直到所有的圖像加載。由於我處理的圖片數量相對較多，因此我希望看到文字內容首先顯示，並伴隨着瀏覽器頁面加載時通常會看到的佔位符圖像。然後，當圖像被加載時，它們只是代替佔位符出現，而不需要整個頁面再次佈局。

我的印象是，如果我指定img標籤的寬度/高度屬性，我可以免費獲得這樣的佔位符，而不必訴諸於一些複雜的DHTML/javascript巫術，但它似乎並不上班。有什麼我失蹤？

來源

2010-07-13 Joel Carranza

奇怪的是，他們的圖像不是異步加載。也許你可以嘗試使用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的每個圖像，但您明白了。

來源

2010-07-13 03:29:53 ashicus

我不知道在您的應用程序究竟發生了根本，我認爲你可以使用onload事件在JavaScript做這個工作，比如：

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

來源

2012-04-24 23:55:44 Tom

向頁面動態添加大量圖片，在後臺加載

回答

相關問題