Charger les images visibles

Disons que nous avons un client lent et nous voulons sauvegarder leur trafique de donnée mobile.

A cet effet, nous décidons de ne pas montrer les images immédiatement, mais plutôt les remplacer avec des conteneurs d’images, comme ainsi:

<img src="placeholder.svg" width="128" height="128" data-src="real.jpg">

Donc, initialement toutes les images sont des placeholder.svg. Lorsque la page défile a la position ou l’utilisateur peut voir l’image – nous changeons src à celui qui est dans data-src, ainsi l’image va être chargée.

Voici un exemple dans un iframe:

Défilez-le pour voir les images s’afficher à la “demande”.

Les requis:

Quand la page est chargée, ces images qui sont à l’écran doivent s’afficher immédiatement, avant tout défilement.
Certaines images peuvent être régulières, sans la propriété data-src. Le code ne doit pas les toucher.
Une fois une image est chargée, elle ne doit plus être rechargée lorsqu’elle est défilée en vue/hors de vue.

P.S. Si vous pouvez, trouvez une solution plus avancée qui pourrait “pré-charger” les images qui sont sur une page en bas/après la position actuelle.

P.P.S. Le défilement vertical sera seulement géré, et non pas le défilement horizontal.

Open a sandbox for the task.

Nous souhaitons également l’exécuter lors du chargement de la page, afin de détecter les images immédiatement visibles et de les charger.

Le code doit être exécuté lors du chargement du document afin qu’il ait accès à son contenu.

Ou le mettre en dessous du <body> :

          // ...Le contenu de la page est en haut...

function isVisible(elem) {

  let coords = elem.getBoundingClientRect();

  let windowHeight = document.documentElement.clientHeight;

  // Le bord supérieur de l'elem est visible ?

  let topVisible = coords.top > 0 && coords.top < windowHeight;

  // bottom elem edge is visible?
  let bottomVisible = coords.bottom < windowHeight && coords.bottom > 0;

  return topVisible || bottomVisible;
}

The showVisible() function uses the visibility check, implemented by isVisible(), to load visible images:

          function showVisible() {
  for (let img of document.querySelectorAll('img')) {
    let realSrc = img.dataset.src;
    if (!realSrc) continue;

    if (isVisible(img)) {
      img.src = realSrc;
      img.dataset.src = '';
    }
  }
}

showVisible();
window.onscroll = showVisible;
        

Pour les images visibles nous pouvons prendre img.dataset.src et l’assigner à img.src (si cela n’a pas été fait déjà).

P.S. La solution propose également une variante de isVisible qui “précharge” les images situées dans une page au-dessus / au-dessous du document en cours de défilement.

Ouvrez la solution dans une sandbox.