Description détaillée du chargement et du préchargement différés des images

Cet article parle du chargement et du préchargement paresseux de Image Si vous ne connaissez pas le chargement et le préchargement paresseux d'images ou si vous souhaitez détailler le chargement et le préchargement paresseux d'images, alors rassemblons-nous. cet article. Bon, arrêtons les bêtises et allons droit au but !

1. Chargement paresseux

Lorsque vous comprenez une nouvelle chose, commencez par quoi et pourquoi. Autrement dit, si vous voulez comprendre la technologie de chargement paresseux des images, vous devez d'abord comprendre ce qu'est le chargement paresseux ? Pourquoi devez-vous utiliser le chargement paresseux ?

1.1 Qu'est-ce que le chargement paresseux ?

Le chargement paresseux est également appelé chargement différé. Lorsque vous accédez à une page, vous devez d'abord remplacer l'image d'arrière-plan de l'élément img ou d'autres éléments par une image par défaut (image de placement), comme ceci

Le navigateur affiche la page Vous uniquement il faut le demander une fois. Lorsque l'image apparaît dans la zone visible du navigateur, le chemin réel de l'image est défini et l'image est affichée.

1.2 Pourquoi utiliser le chargement paresseux des images ?

Lorsque le nombre d'images sur la page atteint un certain nombre et que la taille des images est relativement grande, comme divers sites Web de centres commerciaux, sites Web de matériel photo, etc. Si

charge toutes les images dès le chargement de la page, cela affectera évidemment la vitesse de chargement du site et augmentera la charge sur le serveur, et l'expérience utilisateur sera inévitablement mauvais Ensuite, vous pouvez utiliser la paresse à ce moment-là.

1.3 Principe d'implémentation spécifique du chargement paresseux

La raison pour laquelle l'élément img de la page envoie une requête http est que l'attribut src est défini, sinon le navigateur n'enverra pas de demande de téléchargement de l'image. Tout d'abord, utilisez une image d'espace réservé pour placer toutes les images

sur la page et définissez l'attribut personnalisé src sous l'élément pour stocker le chemin réel de l'image si nécessaire, lors de la suppression. le vrai chemin, ajoutez dynamiquement

à src.

2. Préchargement

2.1.

Le préchargement signifie charger les images à l'avance, et elles peuvent être rendues directement à partir du cache local lorsque l'utilisateur a besoin de les visualiser.

2.2 Pourquoi utiliser le préchargement ?

Lorsque l'image sur la page est relativement grande, la zone sera vide lorsque la page est chargée ou l'image sera chargée lentement Afin d'améliorer l'expérience utilisateur,

Ces images doivent être chargées dans le cache à l'avance Lorsque l'utilisateur ouvre la page, ces images s'afficheront rapidement pour obtenir une meilleure expérience utilisateur.

Quelles sont les modalités d'implémentation de la 2.3 ?

Méthode 1 : utiliser CSS et JavaScript pour implémenter le préchargement

Méthode 2 : utiliser uniquement JavaScriptImplémenter le préchargement

Méthode 3 : utiliser ajax pour implémenter le préchargement

3. La différence entre le chargement paresseux et le préchargement et spécifique. méthodes de mise en œuvre

Les comportements des deux technologies sont opposés, l'une se charge à l'avance et l'autre est un chargement paresseux ou pas de chargement. Le chargement paresseux est bon pour le serveur et peut soulager une certaine pression

. Le préchargement, en revanche, augmentera la charge sur le serveur.

La méthode d'implémentation spécifique du chargement paresseux :

1. Chargement retardé pur, utilisez setTimeOut ou setInterval pour un chargement retardé

2 Le second est le chargement conditionnel, qui remplit certaines conditions ou déclenche certains événementsLe. le téléchargement asynchrone vient de démarrer.

3. Le troisième type est le chargement de la zone visuelle, c'est-à-dire le chargement uniquement de la zone que l'utilisateur peut voir. Ceci est principalement réalisé en surveillant la barre de défilement. chargé lorsque l'utilisateur voit une certaine zone. Commencez le chargement en

à une certaine distance devant l'image, afin de garantir que l'utilisateur puisse voir l'image exactement lorsqu'il la tire. vers le bas.

La méthode spécifique de mise en œuvre du préchargement :

Il existe de nombreuses façons d'implémenter le préchargement, telles que : Utilisez CSS et JavaScript pour implémenter le préchargement ; utilisez JavaScript uniquement pour implémenter le préchargement ; utilisez Ajax pour implémenter le préchargement.

La méthode couramment utilisée est new Image(); définit son src pour implémenter le préchargement, puis utilise la méthode onload pour rappeler l'événement de fin de préchargement. Tant que le navigateur télécharge l'image localement, le même src sera

mis en cache. Il s'agit de la méthode de préchargement la plus basique et la plus pratique. Lorsque Image télécharge l'en-tête de l'image, elle obtiendra la largeur et la hauteur, de sorte que la taille de l'image puisse être obtenue avant le préchargement (la méthode

consiste à utiliser une minuterie pour parcourir l'en-tête de l'image. changements de largeur et de hauteur.

Ce qui précède est tout le contenu de cet article. Si vous n'y connaissez pas grand-chose, vous pouvez facilement le maîtriser par vous-même. >

Recommandations associées :

principe et mise en œuvre du

chargement paresseux de jquery

JS

PréchargementVidéoTechniques de partage de captures d'écran audio/vidéo

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!