Quelles sont les méthodes de chargement différé ?

Les méthodes de chargement paresseux incluent le chargement paresseux d'images, le chargement paresseux de vidéos, le chargement paresseux de fichiers de script, le chargement paresseux de données, etc. Introduction détaillée : 1. Le chargement paresseux des images est une méthode courante de mise en œuvre du chargement paresseux. Lorsque la page est chargée, seules les images de la zone visible sont chargées et les images des autres zones sont présentées sous forme d'espaces réservés lorsque l'utilisateur fait défiler. la page vers L'image réelle est chargée lorsque la position de l'image est spécifiée. Le chargement différé de l'image peut être réalisé en utilisant la bibliothèque JavaScript existante ou le code personnalisé 2. Le chargement différé de la vidéo est implémenté de la même manière que le chargement différé de l'image, par exemple lorsque la page se charge, etc.

Le système d'exploitation de ce tutoriel : système Windows 10, ordinateur DELL G3.

Le chargement paresseux est un modèle de programmation souvent utilisé pour optimiser le chargement des ressources et les performances des pages. L'objectif de cette stratégie est de charger des ressources ou des données spécifiques uniquement lorsque cela est nécessaire, évitant ainsi de charger toutes les ressources au début afin de réduire le temps de chargement des pages et d'améliorer les performances des pages. Le chargement paresseux est généralement utilisé pour charger des ressources telles que des images, des vidéos, des fichiers de script et des données.

Il existe plusieurs méthodes de chargement paresseux :

1. Chargement paresseux d'images

Le chargement paresseux d'images est une méthode d'implémentation courante de chargement paresseux. Lorsque la page se charge, seules les images de la zone visible sont chargées et les images des autres zones sont présentées comme espaces réservés. Lorsque l'utilisateur fait défiler la page jusqu'à la position de l'image, l'image réelle est chargée. Le chargement paresseux des images peut être implémenté à l'aide de bibliothèques JavaScript existantes (telles que imagesLoaded) ou de code personnalisé.

Les étapes de base pour mettre en œuvre le chargement paresseux des images sont les suivantes :

(1) Insérez une image d'espace réservé dans la page. La taille et la position de l'image d'espace réservé sont les mêmes que l'image réelle.

(2) Utilisez le code JavaScript pour écouter les événements de défilement et déterminer la position de la zone visible actuelle.

(3) Lorsque l'utilisateur fait défiler jusqu'à l'emplacement de l'image d'espace réservé, obtenez l'URL de l'image réelle via une requête AJAX et insérez l'image dans la page.

(4) Utilisez le code JavaScript pour écouter l'événement de chargement de l'image. Lorsque l'image est chargée, supprimez l'image d'espace réservé.

2. Chargement paresseux de la vidéo

La mise en œuvre du chargement paresseux de la vidéo est similaire au chargement paresseux des images. Lorsque la page est chargée, seul le lecteur vidéo dans la zone visible est chargé et les autres zones sont présentées dans le formulaire. d'espaces réservés. Lorsque l'utilisateur fait défiler la page jusqu'à l'emplacement de la vidéo, le fichier vidéo commence à se charger. La mise en œuvre du chargement paresseux des vidéos peut être réalisée en utilisant des bibliothèques JavaScript existantes ou du code personnalisé.

Les étapes de base pour mettre en œuvre le chargement différé des vidéos sont les suivantes :

(1) Insérez un lecteur vidéo d'espace réservé dans la page. La taille et la position du lecteur vidéo d'espace réservé sont les mêmes que celles du lecteur vidéo réel.

(2) Utilisez le code JavaScript pour écouter les événements de défilement et déterminer la position de la zone visible actuelle.

(3) Lorsque l'utilisateur fait défiler jusqu'à l'emplacement du lecteur vidéo réservé, obtenez l'URL du fichier vidéo réel via une requête AJAX et insérez le fichier vidéo dans la page.

(4) Utilisez le code JavaScript pour surveiller l'événement de chargement du fichier vidéo. Lorsque le fichier vidéo est chargé, supprimez le lecteur vidéo d'espace réservé.

3. Chargement paresseux des fichiers de script

Le chargement paresseux des fichiers de script peut retarder le chargement des fichiers de script en bas de la page pour éviter de bloquer le rendu de la page. En utilisant des écouteurs d'événements, les fichiers de script peuvent être chargés uniquement en cas de besoin. La mise en œuvre du chargement différé de fichiers de script peut être réalisée en utilisant des bibliothèques JavaScript existantes ou du code personnalisé.

Les étapes de base pour implémenter le chargement paresseux des fichiers de script sont les suivantes :

(1) Insérez la balise d'espace réservé du fichier de script en bas de la page.

(2) Utilisez le code JavaScript pour écouter des événements spécifiques (tels que les événements de clic). Lorsque l'événement se produit, obtenez l'URL du fichier de script via une requête AJAX et insérez le fichier de script dans la page.

(3) Utilisez le code JavaScript pour surveiller l'événement d'achèvement du chargement du fichier de script et exécutez la fonction correspondante lorsque le fichier de script est chargé.

4. Chargement paresseux des données

Le chargement paresseux des données ne peut charger qu'une partie des données lorsque la page est initialisée, et charger d'autres données uniquement lorsque l'utilisateur en a besoin. Cette méthode peut réduire la quantité de données pour l'initialisation de la page et améliorer les performances de la page. La mise en œuvre du chargement paresseux des données peut être réalisée en utilisant des bibliothèques JavaScript existantes ou du code personnalisé.

Les étapes de base pour implémenter le chargement différé des données sont les suivantes :

(1) Insérez un conteneur d'espace réservé pour les données dans la page.

(2) Utilisez le code JavaScript pour écouter des événements spécifiques (tels que des événements de défilement ou des événements de clic). Lorsque l'événement se produit, obtenez l'URL des données via une requête AJAX et insérez les données dans la page.

(3) Utilisez le code JavaScript pour surveiller l'événement de fin de chargement des données et exécutez la fonction correspondante lorsque le chargement des données est terminé.

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!