J'ai remarqué cela dans de nombreux sites Web "modernes" (par exemple, recherche d'images sur facebook et google) où les images sous le pli se chargent uniquement lorsque l'utilisateur fait défiler la page suffisamment pour les amener dans la zone de visualisation visible ( sur la source de la vue, la page montre X nombre de <img>
balises mais elles ne sont pas récupérées directement du serveur ). Comment s'appelle cette technique, comment ça marche et dans combien de navigateurs ça marche. Et existe-t-il un plugin jQuery qui peut atteindre ce comportement avec un minimum de codage.
Éditer
Bonus: quelqu'un peut-il expliquer s'il y a un événement "onScrolledIntoView" ou similaire pour les éléments HTML. Sinon, comment fonctionnent ces plugins?
javascript
jquery
html
scroll
lazy-loading
Salman A
la source
la source
Réponses:
Certaines des réponses ici sont pour une page infinie. Ce que Salman demande, c'est le chargement paresseux des images.
Brancher
Démo
EDIT: Comment fonctionnent ces plugins?
Ceci est une explication simplifiée:
la source
Dave Artz d'AOL a donné une excellente conférence sur l'optimisation à jQuery Conference Boston l'année dernière. AOL utilise un outil appelé Sonar pour le chargement à la demande basé sur la position de défilement. Vérifiez le code pour les détails de la façon dont il compare scrollTop (et d'autres) au décalage de l'élément pour détecter si une partie ou la totalité de l'élément est visible.
jQuery Sonar
Dave parle de Sonar dans ces diapositives . Le sondeur commence sur la diapositive 46, tandis que la discussion générale sur la «charge à la demande» commence sur la diapositive 33.
la source
J'ai proposé ma propre méthode de base qui semble fonctionner correctement (jusqu'à présent). Il y a probablement une douzaine de choses auxquelles certains des scripts populaires traitent et auxquelles je n'ai pas pensé.
Remarque - Cette solution est rapide et facile à mettre en œuvre, mais n'est bien sûr pas excellente pour les performances. Regardez certainement dans le nouvel Intersection Observer comme mentionné par Apoorv et expliqué par developer.google si les performances sont un problème.
Le JQuery
Exemple de code html
Expliqué
Lorsque la page défile, chaque image de la page est cochée.
$(this).attr('data-src')
- si l'image a l'attributdata-src
et à quelle distance ces images sont du bas de la fenêtre.
$(this).offset().top < ($(window).scrollTop() + $(window).height() + 100)
ajustez le + 100 à ce que vous voulez (- 100 par exemple)
var source = $(this).data('src');
- obtient la valeur dedata-src=
aka l'url de l'image$(this).attr('src', source);
- met cette valeur dans lesrc=
$(this).removeAttr('data-src');
- supprime l'attribut data-src (pour que votre navigateur ne gaspille pas de ressources à jouer avec les images déjà chargées)Ajout au code existant
Pour convertir votre html, dans un éditeur, recherchez et remplacez
src="
parsrc="" data-src="
la source
Il y a un joli plugin de défilement infini ici
Je n'en ai jamais programmé un moi-même, mais j'imagine que c'est ainsi que cela fonctionne.
Un événement est lié au défilement de la fenêtre
La fonction appelée vérifie si le haut du défilement est supérieur à la taille de la fenêtre
Une requête 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.
L'ajax renvoie du contenu (probablement au format JSON) et les transmet à la fonction loadnig.
J'espère que cela a du sens.
la source
Utilisez Lozad.js (seulement 569 octets sans dépendances), qui utilise IntersectionObserver pour charger les images de manière performante.
la source
Le couteau suisse du chargement paresseux d'image est ImageLoader de YUI .
Parce qu'il y a plus à ce problème que de simplement regarder la position de défilement.
la source
Ce lien fonctionne pour moi démo
1.Chargez le plugin jQuery loadScroll après la bibliothèque jQuery, mais avant la balise body de fermeture.
2.Ajoutez les images dans votre page Web à l'aide de l'attribut Html5 data-src. Vous pouvez également insérer des espaces réservés à l'aide de l'attribut src normal d'img.
3.Appelez le plugin sur les balises img et spécifiez la durée de l'effet fadeIn lorsque vos images sont visibles
la source
Im utilisant 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 ( CollegeCarePackages.com ). Je n'ai AUCUNE relation (aucune / zéro) de quelque sorte que ce soit avec le développeur, mais cela m'a fait gagner beaucoup de temps et a essentiellement contribué à améliorer notre taux de rebond pour les utilisateurs mobiles et je l'apprécie.
la source