web-dev-qa-db-fra.com

Comment charger des images dynamiquement (ou paresseusement) lorsque les utilisateurs les font défiler

Je l’ai remarqué dans de nombreux sites Web "modernes" (par exemple, Facebook et Google Recherche d’images) où les images situées au-dessous du pli ne se chargent que lorsque l’utilisateur fait défiler la page de manière suffisante pour les amener dans la région visible de la fenêtre ( page montre X nombre de balises <img> mais elles ne sont pas extraites immédiatement du serveur ). Comment appelle-t-on cette technique, comment cela fonctionne-t-il et dans combien de navigateurs fonctionne-t-il? Et existe-t-il un plugin jQuery capable d’obtenir ce comportement avec un minimum de codage?.

Modifier

Bonus: quelqu'un peut-il expliquer s'il existe un événement "onScrolledIntoView" ou similaire pour les éléments HTML. Sinon, comment fonctionnent ces plugins?

javascriptjqueryhtmlscrolllazy-loading
92
Salman A

Certaines des réponses ici sont pour la page infinie. Ce que demande Salman, c'est un chargement d'images paresseux.

Brancher

Démo

EDIT: Comment fonctionnent ces plugins?

Ceci est une explication simplifiée:

  1. Trouver la taille de la fenêtre et trouver la position de toutes les images et leurs tailles
  2. Si l'image n'est pas dans la taille de la fenêtre, remplacez-la par un espace réservé de même taille
  3. Lorsque l'utilisateur fait défiler l'écran et la position de l'image <défilement + hauteur de la fenêtre, l'image est chargée
62
Alec Smart

Dave Artz d’AOL a donné un excellent exposé sur l’optimisation à la conférence jQuery de Boston l’année dernière. AOL utilise un outil appelé Sonar pour le chargement à la demande basé sur la position du défilement. Vérifiez le code pour savoir comment il compare scrollTop (et d'autres) avec le décalage d'élément afin de détecter si tout ou partie de l'élément est visible.

Sonar jQuery

Dave parle de Sonar dans ces diapositives . Sonar commence à la diapositive 46, tandis que la discussion générale "charge à la demande" commence à la diapositive 33.

10
Annika Backstrom

Il y a un joli plugin de défilement infini Nice ici

Je n'en ai jamais programmé moi-même, mais j'imagine que c'est ainsi que cela fonctionne.

  1. Un événement est lié à la fenêtre qui défile

    $(window).scroll(myInfinteScrollFunction);

  2. La fonction appelée vérifie si scroll top top est supérieur à la taille de la fenêtre

    function myInfiniteScrollFunction() {  
    if($(window).scrollTop() == $(window).height())  
    makeAjaxRequest();  
}

  3. Une demande AJAX est effectuée, spécifiant le résultat # à commencer, le nombre à saisir et tout autre paramètre nécessaire à l'extraction de données.

    $.ajax({
    type: "POST",
    url:  "myAjaxFile.php",
    data: {"resultNum": 30, "numPerPage": 50, "query": "interesting%20icons" },
    success: myInfiniteLoadFunction(msg)
});

  4. Le ajax renvoie du contenu (très probablement au format JSON) et le transmet à la fonction loadnig.

J'espère que cela a du sens.

5
jwegner

Charger des images en attachant un écouteur pour faire défiler les événements ou en utilisant setInterval est extrêmement peu performant, car chaque appel à getBoundingClientRect () force le navigateur à remodeler toute la page et introduit un jank considérable sur votre site Web. 

Utilisez Lozad.js (seulement 569 octets sans dépendance), qui utilise IntersectionObserver pour charger des images paresseuses de manière performante.

2
Apoorv Saxena

Le couteau suisse du chargement paresseux d'images est celui de YUI ImageLoader .

Parce que ce problème ne se limite pas à regarder la position du défilement.

1
Arnaud Meuret

Ce lien fonctionne pour moi demo

1.Chargez le plugin jQuery loadScroll après la bibliothèque jQuery, mais avant la balise body de fermeture.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script><script src="jQuery.loadScroll.js"></script>

2.Ajouter les images sur votre page Web en utilisant l'attribut Html5 data-src. Vous pouvez également insérer des espaces réservés à l'aide de l'attribut src habituel de img.

<img data-src="1.jpg" src="Placeholder.jpg" alt="Image Alt"><img data-src="2.jpg" src="Placeholder.jpg" alt="Image Alt"><img data-src="3.jpg" src="Placeholder.jpg" alt="Image Alt">

3. Appelez le plug-in sur les balises img et spécifiez la durée du fadeIn effet lorsque vos images sont visibles

$('img').loadScroll(500); // in ms
0
vebs

J'utilise jQuery Lazy . Il m'a fallu environ 10 minutes pour tester et une heure ou deux pour ajouter la plupart des liens d'image sur l'un de mes sites Web ( CampusCube ). J'ai NO (aucun/zéro) relation de quelque nature que ce soit avec le dev, mais cela m'a fait gagner beaucoup de temps et a fondamentalement contribué à améliorer notre taux de rebond pour les utilisateurs de mobiles et je l'apprécie.

0
Cliff Ribaudo