Comment utiliser Vue pour implémenter le chargement paresseux d'images et d'images d'espace réservé ?

Dans les sites Web, l'utilisation d'images est très courante et la manière d'optimiser le chargement des images est devenue l'une des priorités des développeurs. L'une des optimisations importantes est le chargement paresseux des images, ce qui signifie que les images dans la zone visible ne sont chargées que lorsque l'utilisateur fait défiler la page Web et ne sont pas chargées dans la zone non défilée, réduisant ainsi la pression de chargement de la page et améliorant l'apparence. expérience utilisateur.

Lorsque vous utilisez le framework Vue, vous pouvez facilement implémenter le chargement paresseux d'images et d'images d'espace réservé en utilisant les instructions qu'il fournit.

1. Pour la mise en œuvre du chargement paresseux des images, nous pouvons utiliser la bibliothèque Vue-lazyload. Tout d'abord, vous devez installer la bibliothèque en utilisant npm :

npm i vue-lazyload -S

2. Introduisez la bibliothèque dans le fichier d'entrée main.js de Vue et configurez-la :

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

Vue.use(VueLazyload, {
  preLoad: 1.3, // 预加载的宽高比，默认为 1，即 PhotoShop 中的 1:1
  error: 'path/to/error.png', // 当加载图片失败时的占位图
  loading: 'path/to/loading.gif', // 加载中时的占位图
  attempt: 1 // 图片加载的尝试次数
})

Parmi eux, preLoad spécifie le rapport hauteur/largeur préchargé, par exemple, si vous définissez à 1,3, puis lorsque l'image est préchargée, la largeur sera 1,3 fois la largeur cible ; l'erreur et le chargement sont respectivement les images d'espace réservé à l'image lorsque le chargement échoue et la tentative de chargement est le nombre de tentatives de chargement de l'image.

3. Dans la position de l'image qui doit être chargée paresseusement, remplacez l'attribut src par la commande v-lazy : src 属性替换为 v-lazy 指令：

<img v-lazy="path/to/image.png">

4. 在页面中指定需要启用懒加载的区域：

<template>
  <div class="container">
    <div class="item" v-for="item in list">
      <img v-lazy="item.src"> <!-- 图片使用懒加载 -->
      <p>{{ item.text }}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          src: 'path/to/image-1.png',
          text: '图片 1'
        },
        {
          src: 'path/to/image-2.png',
          text: '图片 2'
        },
        {
          src: 'path/to/image-3.png',
          text: '图片 3'
        }
      ]
    }
  },
  mounted() {
    this.$nextTick(() => {
      // 启用懒加载
      this.$lazyload(this.$refs.container)
    })
  }
}
</script>

上述代码在页面中循环展示一个图片列表，每个图片都使用了懒加载，同时在 mounted 钩子函数中指定启用懒加载的区域为 container

rrreee

dans la page Spécifiez la zone où le chargement paresseux doit être activé :
5. rrreee
Le code ci-dessus boucle pour afficher une liste d'images sur la page, chaque image utilise le chargement paresseux, et en même temps, spécifiez la zone où le chargement paresseux est activé dans la fonction de hook montée. La zone est le module conteneur, afin que le chargement paresseux des images puisse être réalisé.
🎜 Concernant la production d'images fictives, vous pouvez utiliser des outils en ligne ou PhotoShop et d'autres outils pour créer des images fictives adaptées au style de votre site Web. 🎜🎜🎜Grâce aux étapes ci-dessus, vous pouvez facilement obtenir l'effet de chargement paresseux des images et des images d'espace réservé dans Vue, ce qui peut réduire considérablement la pression de chargement du site Web et améliorer l'expérience utilisateur. 🎜

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!