Comment charger des images dynamiquement (ou paresseusement) lorsque l'utilisateur fait défiler en vue
J'ai remarqué de nombreux "moderne" sites web (par exemple, facebook et google recherche d'images), où les images ci-dessous le pli de la charge uniquement lorsque l'utilisateur fait défiler la page suffisant pour les mettre à l'intérieur de la fenêtre d'affichage visible de la région (lors de l'affichage de la source, la page affiche X nombre de <img>
de balises, mais ils ne sont pas récupérées à partir du serveur tout de suite). Qu'est-ce que cette technique appelée, comment ça fonctionne et comment beaucoup de navigateurs ça fonctionne. Et est-il un plugin jQuery qui permet de réaliser ce comportement avec un minimum de codage.
Modifier
Bonus: quelqu'un peut m'expliquer si il y a un "onScrolledIntoView" ou d'un événement similaire pour les éléments HTML. Si non, comment ces plugins travail?
- Vous avez besoin de l'image de chargement paresseux ? Si vous avez besoin de contenu de chargement paresseux, infini défilement plugin est la bonne réponse
- suis désolé, mais ce n'est pas ce que Salman est de demander.
- Je suis seulement intéressé au chargement différé des images; mais je peut regarder d'autres possibilités dans le courant de l' (assez lointain) à l'avenir.
- Vous fait vous demander pourquoi un navigateur par défaut de comportement n'est pas seulement de charger les images qui sont visibles. Imaginez la quantité de bande passante peut avoir été enregistrée dans les 18 dernières années, si c'était le cas!
- Question similaire: stackoverflow.com/questions/1736215/...
- Bien que je comprenne la raison derrière le chargement paresseux... honnêtement, je ne peux pas le supporter quand je visite un site qui utilise cette méthode. Le clignotement des images disques me rend dingue! 🙂
- Parce que tous les développeurs web pour le code de leur site avec cela à l'esprit, si ils ne l'ont pas, la mise en page de la page de sauter et changer à mesure que l'utilisateur défile vers le bas. Ce serait génial si c'était le cas, mais je ne le vois pas devenir la norme, n'importe quand bientôt.
Vous devez vous connecter pour publier un commentaire.
Quelques réponses ici sont pour la page infinie. Ce que Salman se pose est le chargement différé des images.
Plugin
Démo
EDIT: Comment ces plugins travail?
C'est une explication simplifiée:
src
attribut au lieu d'un espace réservé est assez?Dave Maux de AOL a donné une grande conférence sur l'optimisation à jQuery de la Conférence de Boston l'an dernier. AOL utilise un outil appelé Sonar pour le chargement à la demande basé sur la position de défilement. Vérifier le code pour avoir les détails de la façon dont il se compare scrollTop (et autres) à l'élément de décalage pour détecter si une partie ou la totalité de l'élément est visible.
jQuery Sonar
Dave parle de Sonar dans ces diapositives. Sonar commence sur la diapositive 46, tandis que l'ensemble de la "charge à la demande" le début de la discussion sur la diapositive 33.
Il y a un assez beau infini défilement plugin ici
Je n'ai jamais programmé un moi même, mais j'imagine que c'est la façon dont il fonctionne.
Un événement est lié à la fenêtre à défilement
La fonction appelée vérifie si faites défiler de haut est plus grande que la taille de la fenêtre
Une requête AJAX est faite, en spécifiant les résultats n ° de départ, comment beaucoup à saisir, et tout les autres paramètres nécessaires pour les données de traction.
L'ajax retourne quelques (plus probable au format JSON) le contenu et les transmet dans le loadnig fonction.
L'espoir qui fait sens.
Je suis venu avec ma propre méthode de base qui semble fonctionner correctement (pour l'instant). Il y a probablement une douzaine de choses, une partie de la populaire scripts adresse que je n'ai pas pensé.
Note - Cette solution est rapide et facile à mettre en œuvre mais bien sûr, pas génial pour la performance. Vraiment regarder dans la nouvelle Intersection De L'Observateur comme mentionné par Apoorv et expliqué par des développeurs.google si la performance est 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 dans quelle mesure ces images sont de la partie inférieure de la fenêtre..
$(this).offset().top < ($(window).scrollTop() + $(window).height() + 100)
ajuster le + 100 de 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 les données d'attribut src (si votre navigateur ne prend pas en gaspiller les ressources de jouer avec les images qui ont déjà chargé)L'Ajout D'Un Code Existant
Pour convertir votre code html dans un éditeur de rechercher et de remplacer
src="
avecsrc="" data-src="
Utilisation Lozad.js (juste 569 octets sans dépendances), qui utilise IntersectionObserver à chargement différé des images performantly.
Le couteau Suisse de l'image de chargement différé est YUI est ImageLoader.
Parce qu'il n'y est plus de ce problème qu'il suffit de regarder la position de défilement.
Ce Lien de travail pour moi démo
1.Chargement de jQuery loadScroll plugin après la bibliothèque jQuery, mais avant la balise body de clôture.
2.Ajouter les images dans votre page web en utilisant Html5 données d'attribut src. Vous pouvez également insérer des espaces réservés à l'aide de l'ordinaire img src attribut.
3.Appelez le plug-in sur les balises img et préciser la durée de la
fadeIn effet que vos images sont à venir en vue
Im en utilisant jQuery Lazy. Il m'a fallu environ 10 minutes pour tester et une heure ou deux pour ajouter à la plupart des liens de l'image sur un de mes sites web (CollegeCarePackages.com). J'ai sans (AUCUN/zéro) relation d'aucune sorte pour le dev, mais il m'a sauvé beaucoup de temps et d'fondamentalement contribué à améliorer notre taux de rebond pour les utilisateurs mobiles, et je l'apprécie.