Ajout dynamique d'un grand nombre d'images à une page, chargement en arrière-plan

Question

J'ajoute dynamiquement un nombre relativement important de petites images à une page. Je fais une demande de XMLHTTP qui renvoie certaines données JSON de la forme

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

Je THEN du code HTML de la forme

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

et ajouter ce contenu à la page en utilisant la propriété innerHTML.

Le problème est que le contenu ne semble pas apparaître tant que toutes les images ne sont pas chargées. Étant donné que je traite un nombre relativement important d'images, j'aimerais que le contenu textuel apparaisse en premier, accompagné des images d'espace réservé que vous pouvez généralement voir lorsqu'une page de navigateur est en cours de chargement. Puis, au fur et à mesure que les images sont chargées, elles apparaissent simplement à la place des espaces réservés sans nécessiter la mise en forme de toute la page. J'avais l'impression que si je spécifiais des attributs largeur/hauteur pour la balise img, j'obtiendrais de tels espaces réservés "gratuitement", sans devoir recourir à un peu de magie DHTML/javascript complexe, mais cela ne semble pas travailler. Y a-t-il quelque chose qui me manque?

Answer 1

C'est étrange que les images ne se chargent pas de manière asynchrone. Peut-être que vous pourriez essayer de créer le HTML en utilisant les fonctions DOM au lieu d'utiliser innerHTML. Par exemple (non testé):

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

J'ai fait des choses similaires comme celui-ci avec des images dans le passé et ils ont toujours travaillé comme prévu.

Vous devez utiliser une boucle pour ajouter chaque image du JSON, mais vous avez l'idée.

Answer 2

Je ne sais pas exactement ce qui est arrivé dans votre application, je pense que vous pouvez utiliser l'événement onload en javascript pour faire ce travail, par exemple:

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