Comment fonctionne le chargement différé ?
Une image HTML normale ressemble à ceci :
<img src="sample.jpg" width="100%"/>Les plugins de chargement paresseux réécrivent le code comme ceci :
<img data-src="sample.jpg" width="100%"/>Comme vous l'avez remarqué,srcl'attribut a été remplacé pardata-src.
Parce que nonsrc, le navigateur ne charge pas initialement cette image. Plus tard, un peu de code JavaScript vérifie si l'image est dans la fenêtre (la fenêtre de l'utilisateur), et si elle est à l'intérieur,data-srcrevient à çasrcquel navigateur déclenche le téléchargement et l'affichage de l'image.
Qu'est-ce que le chargement différé natif ?
Chrome est livré avec un "chargement paresseux natif". Vous pouvez lire à ce sujet ici.
Le chargement paresseux natif a l'avantage qu'il n'y a pas besoin de JavaScript et est généralement beaucoup plus rapide puisque le navigateur le fait "nativement".
Le code ressemble à ceci :
<img src="sample.jpg" loading="lazy" width="100%"/>Que sont les images volantes ?
Flying Images est un plugin de chargement paresseux hautes performances. Il utilise le chargement paresseux "natif" du navigateur s'il est disponible, sinon utilisez du JavaScript normal pour le chargement paresseux.
Les images volantes peuvent également charger des images avant même que les images n'apparaissent dans la fenêtre d'affichage.
Avez-vous peur du chargement paresseux car cela nuit à l'expérience utilisateur ?
En quoi les images volantes sont-elles différentes des autres plugins de chargement paresseux ?
- Utilise le chargement paresseux intégré - utilisez le chargement paresseux intégré s'il est disponible (actuellement uniquement pris en charge dans Chrome), sinon utilisez JavaScript pour charger paresseux les images.
- Charger les images avant d'entrer dans la fenêtre - tandis que d'autres plugins chargent les images lorsqu'elles sont "à l'intérieur" de la fenêtre, les images volantes les chargent lorsqu'elles sont sur le point d'entrer dans la fenêtre.
- JavaScript minuscule - seulement 0,5 Ko, compressé, réduit.
- Si vous le souhaitez, vous pouvez utiliser uniquement – voulez-vous prendre en charge uniquement Chrome ? Vous pouvez passer en "natif uniquement", qui n'injecte pas de JavaScript.
- Réécrit tout le code HTML - ne manquez jamais une image à cause d'un chargement paresseux (même si elle est ajoutée par des plugins de galerie).
- Remplissage transparent - une minuscule base64 transparente est ajoutée à toutes les images. Plus de scintillement lors du chargement des images.
- Exclure des mots clés - Presque tous les plugins de chargement paresseux fournissent une fonction d'exclusion, mais les images volantes peuvent également exclure des images du nœud parent de l'image. Utile si votre image n'a pas de nom de classe.
- Prend en charge les navigateurs avec IE et JavaScript désactivés - toutes les images sont chargées instantanément s'il s'agit d'Internet Explorer ou même si JavaScript est complètement désactivé (en utilisant
aucun scriptétiqueter).
