Je vois certains grands sites Web. Si la page contient de nombreuses images, lorsque vous faites défiler jusqu'à la ligne correspondante, les images de la ligne actuelle sont chargées immédiatement. De cette façon, la page s'ouvre avec uniquement les images dans la zone visible, et Les autres images masquées ne seront pas chargées, ce qui accélérera le chargement des pages. Pour les pages plus longues, cette solution est meilleure. Le principe est le suivant : les images situées sous la zone visible de la page ne sont chargées que lorsque l'utilisateur fait défiler jusqu'à l'emplacement de l'image, puis sont chargées. Quels sont les avantages de faire cela ? ——Lorsque la page comporte plusieurs écrans de contenu, il est possible que l'utilisateur ne visualise que le contenu des premiers écrans. De cette manière, nous ne pouvons charger que les images dont l'utilisateur a besoin pour voir et réduire la charge provoquée par cela. le serveur envoie les fichiers image au navigateur de l'utilisateur. Voici trois étapes : Cette méthode vous présente js pour implémenter le chargement différé des images.
Implémentation JS de la méthode de chargement d'image retardé 1 :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
|
Méthode JS pour implémenter le chargement différé des images de pages Web :
Avant de poster le code, laissez-moi vous expliquer le principe de js pour implémenter le chargement différé des images.
Principe de mise en œuvre :
Modifiez toutes les images nécessitant un chargement différé au format suivant :
1 |
|
Ensuite, lorsque la page se charge, enregistrez toutes les images en utilisant lazy_src dans un tableau, puis calculez le haut de la zone visible lors du défilement, puis réduisez le haut des images à chargement retardé par rapport à la zone visible actuelle (c'est-à-dire la image La valeur src de l'image apparaissant dans la zone visible est remplacée par lazy_src (charger l'image) :
Code JS :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 |
|
Comment utiliser : changez le src de l'image qui doit être chargée avec retard sur la page en lazy_src, puis mettez le js ci-dessus à la fin du corps, puis appelez : lazyLoad.init();
Pour taquiner, vous pouvez utiliser Firebug pour vérifier si le chargement de l'image est retardé.
Aussi :
S'il y a une colonne avec un changement de contenu sur votre page, les images du contenu peuvent ne pas s'afficher lors du changement. La solution est de charger les images séparément pendant le contenu, comme :
.
1 2 3 4 5 |
|
Implémentation js originale de la troisième méthode de chargement différé de l'image :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 |
|
Le contenu ci-dessus présente js pour implémenter le chargement différé des images via trois méthodes. J'espère que vous l'aimerez.