Comment implémenter le chargement paresseux des images dans Uniapp

Comment implémenter le chargement paresseux d'images dans uniapp

Dans les applications mobiles et le développement Web modernes, les images sont un élément indispensable. Cependant, en raison des limites des réseaux mobiles et des exigences en matière d'expérience utilisateur, le chargement d'un grand nombre d'images en même temps peut entraîner un ralentissement de la vitesse de chargement des applications ou des pages Web, affectant ainsi l'expérience utilisateur. Afin de résoudre ce problème, vous pouvez utiliser la technologie de chargement paresseux des images, qui peut retarder le chargement des images et ne commencer à se charger que lorsqu'elles entrent dans la zone visible de l'utilisateur, améliorant ainsi la vitesse de chargement des pages et l'expérience utilisateur.

UniApp est un framework de développement d'applications multiplateforme basé sur Vue.js. Il peut générer simultanément des applications fonctionnant sur iOS, Android, H5 et d'autres plateformes. Dans UniApp, vous pouvez utiliser certains plug-ins et technologies pour implémenter le chargement paresseux des images. Ce qui suit montrera comment utiliser le plug-in vue-lazyload et l'API Intersection Observer pour implémenter le chargement paresseux des images.

Tout d'abord, installez le plugin vue-lazyload dans le projet UniApp. Ouvrez l'outil de ligne de commande, basculez vers le répertoire racine de votre projet UniApp et exécutez la commande suivante :

npm install vue-lazyload

Une fois l'installation terminée, introduisez les styles pertinents dans le fichier uni.scss :

@import 'path/ to/node_modules/vue-lazyload/style/uni.scss';

Ensuite, dans le composant image qui doit être chargé paresseux, utilisez l'instruction v-lazy pour retarder le chargement de l'image. Par exemple :

d477f9ce7bf77f53fbcf36bec1b69b7a
87601458bc7b519de4aaf92067cd0cca
21c97d3a051048b8e55e3c8f199a54b2

où imageUrl est l'adresse de l'image. De cette façon, lorsque l'image entre dans la zone visible de l'utilisateur, l'image commencera à se charger, améliorant ainsi la vitesse de chargement de la page.

Ensuite, afin d'obtenir l'effet de chargement de l'image lorsqu'elle entre dans la zone visuelle de l'utilisateur, nous pouvons utiliser l'API Intersection Observer. Tout d’abord, initialisez l’objet Intersection Observer dans la fonction hook de cycle de vie du composant et surveillez la visibilité de l’élément d’image. Par exemple :

3f1c4e4b6b16bbbd69b2ee476dc4f83a
export default {

mounted() {
  const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        this.loadImage(entry.target);
      }
    });
  });

  const lazyImages = document.querySelectorAll('img[v-lazy]');
  lazyImages.forEach((lazyImage) => {
    observer.observe(lazyImage);
  });
},

methods: {
  loadImage(image) {
    image.src = image.dataset.src;
  },
},

}
2cacc6d41bbb37262a98f745aa00fbf0

Dans la fonction hook de cycle de vie montée, créez un objet Intersection Observer et transmettez une fonction de rappel. Cette fonction de rappel sera déclenchée lorsque l'élément observé entre ou sort de la zone visuelle de l'utilisateur. Dans la fonction de rappel, parcourez la liste des éléments observés. Si l'élément entre dans la zone visible de l'utilisateur, appelez la méthode loadImage pour charger l'image.

Dans la méthode loadImage, attribuez l'attribut data-src de l'image à l'attribut src de l'image, afin que l'image commence à se charger.

Voici les étapes ci-dessus pour implémenter la fonction de chargement différé d'image dans UniApp à l'aide du plug-in vue-lazyload et de l'API Intersection Observer. En retardant le chargement des images, le temps de chargement des pages peut être considérablement réduit et l'expérience utilisateur améliorée. Bien entendu, dans le développement réel, la mise en œuvre du chargement paresseux des images doit être ajustée et optimisée en fonction des besoins spécifiques du projet.

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!