Sans plus tarder, regardez simplement l'exemple
Tout d'abord, la façon d'écrire des marques d'image
<img data-src = "/ images / image.jpg">
Vous devez mettre l'adresse de l'image dans l'attribut data-src et src n'est pas nécessaire, vous pouvez donc supprimer directement src .
Code CSS
Pour toutes les images avec l'attribut data-src , nous afficherons initialement l'état comme invisible, en les ajustant par transparence:
img {opacité: 1; transition: opacité 0.3s;} img [data-src] {opacité: 0;}Quel est le but de l'écriture de cette façon? Lorsque l'image se charge, vous pourrez voir l'effet.
Code javascript
Nous allons éventuellement supprimer data-src et le remplacer par l'attribut SRC, mais c'est l'action une fois l'image chargée avec succès:
[] .Forach.call (document.QuerySelectorall ('img [data-src]'), fonction (img) {img.setAttribute ('src', img.getAttribute ('data-src')); img.onload = function () {img.reMoveAttribute ('data-src');};});Par rapport à d'autres technologies de chargement de retard d'image, cette méthode est très simple. Il ne nécessite presque aucune autre condition et peut être utilisé n'importe où. Il est très flexible à utiliser.
Mais il convient de noter que la simplicité a le meilleur ou le meilleur, et il sera également insuffisant en raison de la simplicité. Il n'a pas la fonction de faire défiler les images dans la fenêtre visuelle puis de les charger. La technologie à utiliser à la fin dépend du scénario.
Ce qui précède concerne cet article, j'espère qu'il sera utile au travail et à l'étude de chacun.