Commande de l'ordre de chargement de l'image en HTML

utilisez javascript, et laissez votre image src propriétés du vide.

assembler un tableau d'adresses d'image, et y revenir, en chargeant vos images et en appelant 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 démarrer.

EDIT

pour éviter les requêtes multiples au serveur, vous pouvez utiliser presque la même méthode, mais n'insérez pas d'éléments d'image jusqu'à ce que vous soyez prêt à les charger. Avoir un <span> conteneur en attente pour chaque image. Ensuite, bouclez la boucle, récupérez l'objet span et insérez dynamiquement la balise 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éé.

il suffit d'inclure L'image 'chargement' avant toute autre image. habituellement, ils sont inclus en haut de la page et lorsque le chargement de la page est terminé, ils sont cachés par un JS.

je pense que cet article https://varvy.com/pagespeed/defer-images.html donne une très bonne solution et simple. Notez la partie qui explique comment créer des balises "empty" avec:

à éviter

pour afficher une image de chargement, il suffit de la mettre dans le HTML et de la modifier plus tard à l'endroit approprié moment/l'événement.

Voici un petit plugin jQuery qui fait cela pour vous: https://github.com/AlexandreKilian/imageorder