많은 수의 이미지를 페이지에 동적으로 추가하여 백그라운드로로드

Question

페이지에 상대적으로 많은 수의 작은 이미지를 동적으로 추가하고 있습니다. 나는 다음 양식

<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 속성을 사용하여 페이지에 콘텐츠를 추가

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

형태의 일부 JSON 데이터를 반환하는 XMLHTTP 요청을합니다.

문제는 모든 이미지가로드 될 때까지 콘텐츠가 나타나지 않는 것입니다. 비교적 많은 수의 이미지를 다루기 때문에 브라우저 페이지가로드 될 때 일반적으로 볼 수있는 자리 표시 자 이미지와 함께 텍스트 내용이 먼저 표시되는 것을보고 싶습니다. 그런 다음 이미지가로드되면 전체 페이지를 다시 레이아웃 할 필요없이 자리 표시 자 대신 이미지가 표시됩니다.

img 태그의 너비/높이 특성을 지정하면 "DHTML/javascript 마법"마법에 의지하지 않고 "무료"대신 해당 자리 표시자를 얻을 수 있다는 인상을 받았습니다. 일하다. 제가 누락 된 것이 있습니까?

Answer 1

이미지가 비동기 적으로로드되는 것은 이상한 일입니다. 어쩌면 innerHTML 대신 DOM 함수를 사용하여 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

내가 정확히 응용 프로그램에서 무슨 일이 있었는지 모르는, 나는 당신이 예를 들어,이 일을 자바 스크립트에서 온로드 이벤트를 사용할 수 있다고 생각 :

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