Explication détaillée du chargement paresseux des images en Javascript

Cet article présente principalement des informations pertinentes sur l'explication détaillée du chargement paresseux des images en Javascript. Voici une explication détaillée et l'utilisation du chargement paresseux et du chargement asynchrone. Les amis dans le besoin peuvent s'y référer

Explication détaillée d'exemples de chargement différé d'images en Javascript

Fonction : Assurer la vitesse d'ouverture de la page (si la page ne peut pas être ouverte dans les 3 secondes, elle est considérée comme un page morte)

Principe :

1) Pour les images dans le contenu du premier écran : Tout d'abord, donnez à la zone correspondante une image par défaut pour occuper la position (l'image par défaut doit être très petit, qui peut généralement être maintenu dans les 5 Ko), lorsque le contenu du premier écran est chargé (ou un délai peut être donné), commencez à charger l'image réelle

2) Pour les images sur d'autres écrans : donne également une image par défaut Placeholder, lorsque la barre de défilement défile jusqu'à la zone correspondante, on commence à charger l'image réelle

Extension : Chargement asynchrone des données : Dans un premier temps, seules les données des deux premiers écrans sont chargées et lié, et les données suivantes ne sont pas traitées, lorsque la page défile jusqu'à la zone correspondante, demandez à nouveau les données, puis liez les données de rendu

Laissez d'abord le src dans la balise img être vide, laissez imgdisplay:none; l'arrière-plan à l'extérieur p Liez une image d'arrière-plan à l'image, puis attendez que la page se charge avant de charger l'image

Utilisez un événement timer ou window.onload, puis liez le ; l'adresse URL obtenue à la balise img de l'élément src ; cependant, si l'adresse réelle de l'image obtenue est la mauvaise adresse src, non seulement la console signalera une erreur, mais également une image/image fork cassée apparaîtra sur la page, affectant la vision. Voici l'événement de traitement

 var oImg = new Image; //创建一个临时的img标签

 oImg.src = 真实的img的src地址

 oImg.onload=function(){ //-> 当图片能够正常加载

  img.src = this.src；

  img.syule.disolay = 'block'；

  oImg = null; //释放空标签

 }

Optimisation des performances du site Web :

1. Requêtes HTTP"

2. Fusionner les fichiers css/js

3. Fusionner les images ICON->Image Sprite/script CSS

4. Chargement paresseux des images

5. Chargement asynchrone des données

6 Côté mobile, notre pays fait une simple page promotionnelle, et essaie d'écrire des css et js comme embarqués

.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!