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

问题描述：

我在页面上动态添加了大量小图片。我把它返回表格的一些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巫术，但它似乎并不上班。有什么我失踪？

答

奇怪的是，他们的图像不是异步加载。也许你可以尝试使用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的每个图像，但您明白了。

答

我不知道在您的应用程序究竟发生了根本，我认为你可以使用onload事件在JavaScript做这个工作，比如：

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

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

相关推荐