Le contrôle de l'image de l'ordre de chargement en HTML

L'utilisation de javascript, et de laisser votre image src propriétés vide.

Assembler un tableau de l'image des adresses, et une boucle à travers elle, le chargement de vos images et de l'appel d'une fonction récursive lorsque le onload ou onerror méthode pour chaque image renvoie une valeur.

HTML:

<img src='' id='img0' alt='[]' />
<img src='' id='img1' alt='[]' />
<img src='' id='img2' alt='[]' />

JS:

var imgAddresses = ['img1.png','img2.jpg','img3.gif'];

function loadImage(counter) {
  //Break out if no more images
  if (counter==imgAddresses.length) { return; }

  //Grab an image obj
  var I = document.getElementById("img"+counter);

  //Monitor load or error events, moving on to next image in either case
  I.onload = I.onerror = function() { loadImage(counter+1); }

  //Change source (then wait for event)
  I.src = imgAddresses[counter];
}

loadImage(0);

Vous pouvez même jouer avec un document.getElementsByTagName("IMG").

Par ailleurs, si vous avez besoin d'un chargement d'image, c'est un bon endroit pour commencer.

MODIFIER

Pour éviter de multiples requêtes vers le serveur, vous pourriez utiliser presque la même méthode, seulement ne pas insérer des éléments de l'image jusqu'à ce que vous êtes prêt à charger. Avoir un <span> conteneur d'attente pour chaque image. Puis, en boucle, obtenir la durée de l'objet, et insérer dynamiquement la balise d'image:

var img = document.createElement("IMG");
document.getElementById('mySpan').appendChild(img);
img.src = ...

Puis l'image requête est faite qu'une seule fois, lorsque l'élément est créé.

Je pense que cet article https://varvy.com/pagespeed/defer-images.html donne une très bonne solution et simple. Avis de la partie qui explique comment créer des "vides" <img> balises avec:

<img src="de données:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" données-src="votre-image-ici">

pour éviter de <img src="">

À l'écran de chargement de l'image, il suffit de mettre dans le code HTML et de le modifier plus tard au moment de l'événement.