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