Comment gérer le chargement paresseux et l'espace réservé des images dans Vue

Comment gérer le chargement paresseux et la prise d'espace des images dans Vue

Lazy Loading est une technologie d'optimisation des performances qui peut retarder le chargement des images dans les pages Web et ne les charger que lorsque l'utilisateur fait défiler jusqu'à l'emplacement de l'image. , pour réduire le temps de chargement initial et l'utilisation de la bande passante du réseau. Dans le même temps, l'utilisation de la technologie des espaces réservés peut maintenir la stabilité de la mise en page et éviter le problème de désordre de la mise en page causé par le chargement lent des images. Cet article expliquera comment implémenter les fonctions de chargement différé et d'espace réservé des images dans Vue, et fournira des exemples de code spécifiques.

1. Installez le plug-in

Tout d'abord, nous devons installer un plug-in Vue pour implémenter la fonction de chargement paresseux des images. Il est recommandé d'utiliser le plug-in vue-lazyload, facile à utiliser et offrant une compatibilité élevée. Installez via la commande suivante :

npm install vue-lazyload --save

2. Configurez le plug-in

Dans le fichier d'entrée de Vue (généralement main.js), nous devons introduire et configurer le plug-in vue-lazyload. La configuration spécifique peut être ajustée en fonction des besoins réels. Voici un exemple de configuration couramment utilisé :

import Vue from 'vue'
import VueLazyload from 'vue-lazyload'

Vue.use(VueLazyload, {
  preLoad: 1.3, // 预加载高度的比例
  error: 'error.jpg', // 图片加载失败时显示的占位图片
  loading: 'loading.gif', // 图片加载过程中显示的占位图片
  attempt: 3 // 加载失败后的重试次数
})

Dans la configuration ci-dessus, nous définissons l'image d'espace réservé affichée lorsque le chargement de l'image échoue sur error.jpg, et l'image d'espace réservé affichée pendant le processus de chargement de l'image. L'image est en cours de chargement.gif et des tentatives sont faites pour recharger l'image jusqu'à 3 fois après l'échec du chargement.

3. Plug-in d'application

Lorsque des images sont spécifiquement utilisées, nous pouvons charger paresseusement des images via la commande v-lazy et utiliser la commande v-loading pour ajouter des effets d'espace réservé pendant le processus de chargement de l'image. Voici un exemple d'utilisation du plug-in vue-lazyload pour implémenter le chargement paresseux et l'espace réservé des images :

<template>
  <div>
    <img  v-lazy="imageSrc" v-loading="isLoading" / alt="Comment gérer le chargement paresseux et l'espace réservé des images dans Vue" >
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageSrc: '', // 实际图片的地址
      isLoading: true // 控制加载过程中的占位效果
    }
  },
  mounted() {
    // 模拟获取实际图片地址的过程
    setTimeout(() => {
      this.imageSrc = 'realImage.jpg'
      this.isLoading = false
    }, 1000)
  }
}
</script>

Dans le code ci-dessus, nous lions l'adresse réelle de l'image à l'attribut imageSrc via l'instruction v-lazy, et utilisez l'instruction v-loading pour L'effet d'espace réservé pendant le processus de chargement est lié à la propriété isLoading. Dans le hook de cycle de vie monté, nous avons simulé un processus d'obtention de l'adresse réelle de l'image, attribué l'adresse réelle à imageSrc après 1 seconde et défini isLoading sur false pour afficher l'image.

Avec la configuration et l'exemple de code ci-dessus, nous pouvons implémenter les fonctions de chargement paresseux et d'espace réservé des images dans Vue. Cela peut améliorer la vitesse de chargement et l'expérience utilisateur des pages Web, et éviter les problèmes de mise en page causés par le chargement lent des images. Dans le même temps, grâce à la configuration flexible du plug-in vue-lazyload, nous pouvons ajuster les effets du chargement paresseux et de l'espace réservé en fonction des besoins pour obtenir de meilleurs résultats d'optimisation.

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!