Comment charger des images de manière asynchrone dans jquery

Dans le développement front-end, les images sont l'un de nos contenus couramment utilisés. Cependant, pour certaines pages contenant un grand nombre d'images, les charger toutes en même temps peut ralentir la réponse de la page et réduire l'expérience utilisateur. la technologie doit être utilisée pour optimiser les performances des pages. jQuery est une excellente bibliothèque JavaScript qui fournit des méthodes pratiques pour charger des images de manière asynchrone.

Ce qui suit explique comment charger des images de manière asynchrone dans jQuery.

1. Chargement paresseux des images

Le chargement paresseux signifie charger les images uniquement lorsque l'utilisateur fait défiler vers la zone visible. Cette technologie peut optimiser les performances de chargement des pages et améliorer l’expérience utilisateur.

Pour implémenter le chargement différé dans jQuery, vous pouvez utiliser le plug-in lazyload. Il s'agit d'un plug-in léger qui ne nécessite pas trop de code. Il vous suffit d'ajouter la classe spécifiée à l'image qui doit être chargée paresseusement, puis d'appeler la méthode du plug-in.

Les étapes sont les suivantes :

1. Téléchargez le plug-in lazyload et introduisez la bibliothèque jQuery.

2. Ajoutez l'attribut class aux images qui doivent être chargées paresseusement en HTML, comme indiqué ci-dessous :

<img class="lazyload" data-src="image.png">

3 Appelez la méthode lazyload en JavaScript et spécifiez la classe de l'image qui doit être chargée paresseusement.

$(function(){
    $("img.lazyload").lazyload();
});

Il convient de noter que l'adresse réelle de l'image doit être spécifiée dans l'attribut data-src, pas dans l'attribut src. De cette façon, l'adresse de l'image originale ne sera pas chargée immédiatement, mais sera chargée en cas de besoin.

2. Précharger les images

Le préchargement signifie charger les images requises à l'avance. En cas de besoin, les images mises en cache sont utilisées directement sans faire de requêtes réseau. Cette technique peut améliorer la vitesse d’affichage des pages et l’expérience utilisateur.

Pour précharger des images dans jQuery, vous pouvez utiliser la méthode de préchargement. Le code est le suivant :

$.preload = function(){
    var args_len = arguments.length;
    for (var i = args_len; i--;) {
        $("<img>").attr("src", arguments[i]);
    }
}

Cette méthode reçoit plusieurs adresses d'image en tant que paramètres, puis utilise jQuery pour créer dynamiquement une balise img et spécifie l'attribut src comme paramètre. adresse de l’image qui doit être préchargée. De cette manière, lorsque ces images doivent être affichées, elles peuvent être extraites directement du cache local sans faire de requêtes réseau.

Cette méthode peut être appelée lors du chargement de la page, par exemple :

$.preload("image1.png", "image2.png", "image3.png");

L'effet du préchargement des images n'est pas évident, mais elle peut effectivement accélérer l'affichage des images lorsque l'état du réseau est mauvais.

3. Chargement différé des images

Le chargement différé consiste à charger de manière asynchrone certaines images requises après le chargement de la page. Cette technologie peut éviter de charger toutes les images du premier écran, ce qui ralentit le chargement des pages.

Pour implémenter le chargement paresseux dans jQuery, vous pouvez combiner les deux technologies de chargement paresseux et de préchargement pour obtenir un effet similaire au chargement paresseux.

Il convient de noter que le chargement différé est moins efficace que le chargement paresseux car il nécessite un chargement asynchrone des images après le chargement de la page.

Résumé

Le chargement asynchrone des images peut optimiser efficacement les performances de chargement des pages et améliorer l'expérience utilisateur. Pour implémenter le chargement asynchrone d'images dans jQuery, vous pouvez utiliser trois technologies : le chargement différé, le préchargement et le chargement différé. Ces technologies ont leurs avantages dans différents scénarios.

Le chargement paresseux peut éviter de charger trop d'images à la fois, ce qui entraîne une réponse lente de la page, et améliore la vitesse d'affichage de la page et l'expérience utilisateur. Le préchargement peut améliorer la vitesse d'affichage des images et éviter le temps d'attente causé par les requêtes réseau. Le chargement différé peut combiner les avantages du chargement paresseux et du préchargement, et charger les images de manière asynchrone après le chargement de la page pour éviter une réponse lente de la page causée par le chargement de toutes les images du premier écran.

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!