web-dev-qa-db-fra.com

Accélérez le chargement des pages en différant les images

Je crée une page qui contiendra beaucoup d'images de grande taille, donc naturellement je veux m'assurer que la page se charge sans trop de problèmes. J'ai lu cet article ici http://24ways.org/2010/speed-up-your-site-with-delayed-content

La méthode de report est la suivante (tiré de la page, ne vous occupez pas de l'URL)

<div>
    <h4>
        <a href="http://allinthehead.com/" data-gravatar-hash="13734b0cb20708f79e730809c29c3c48">
            Drew McLellan
        </a>
    </h4>
</div>

puis plus tard un extrait de js s'occupe du chargement de l'image

$(window).load(function() {
    $('a[data-gravatar-hash]').prepend(function(index){
        var hash = $(this).attr('data-gravatar-hash')
        return '<img width="100" height="100" alt="" src="http://www.gravatar.com/avatar.php?size=100&amp;gravatar_id=' + hash + '">'
    });
});

Je ne prévois pas de le faire pour chaque image, mais certainement pour une image dont je n'ai pas besoin qu'elle s'affiche au moment du chargement de la page.

Est-ce la meilleure façon de procéder ou existe-t-il de meilleures façons d'accélérer le chargement des pages en différant les images?

Merci

javascriptjquerydeferred-loading
28
Huangism

Un peu tard, mais au cas où cela profiterait aux autres, il y a un excellent article sur ce sujet par Patrick Sexton https://varvy.com/pagespeed/defer-images.html

Il suggère essentiellement la même chose, seulement en utilisant de minuscules images codées en base 64, il peut placer ses balises d'image directement dans le HTML, ce qui a l'avantage de pouvoir contrôler individuellement des attributs tels que la hauteur, la largeur, l'alt, etc. Il sera beaucoup plus facile de maintenir votre code HTML de cette façon plutôt que de créer la balise d'image entière dans un script.

<img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="image1.jpg" alt="image 1">
<img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="image2.jpg" alt="image 2">

Ensuite, votre script est simple et générique pour toutes les images

<script>
function init() {
  var imgDefer = document.getElementsByTagName('img');
  for (var i = 0; i < imgDefer.length; i++) {
    if (imgDefer[i].getAttribute('data-src')) {
      imgDefer[i].setAttribute('src',imgDefer[i].getAttribute('data-src'));
    }
  }
}

window.onload = init;
</script>
41
jsolis

Cela semble être une façon assez propre de différer les images. Le seul problème potentiel est que les images contiennent des informations importantes car "les attributs de données sont une nouvelle fonctionnalité en HTML5".

Une autre option pourrait être de mettre les images à la fin du corps et d'utiliser CSS pour les positionner. Personnellement, je m'en tiendrai au javascript.

4
nrodic

Voici une version présentant .querySelectorAll :

function swapSrcAttributes(source) {
  return function(element) {
    element.setAttribute('src', element.getAttribute(source));
  }
}

function forEach(collection, partial) {
  for (var i = 0; i < collection.length; i++) {
     partial(collection[i]);
  }
}

function initDeferImages() {
  // for images
  var deferImages = document.querySelectorAll('img[data-src]');

  // or you could be less specific and remove the `img`
  deferImages = document.querySelectorAll('[data-src]');

  forEach(deferImages, swapSrcAttributes('data-src'));
}

window.onload = function() {
  initDeferImages();
}

Voici le tableau de compatibilité pour .querySelector et .querySelectorAll via https://caniuse.com/#feat=queryselector

1
Sgnl