Comment utiliser Vue pour implémenter le chargement paresseux d'images et d'images d'espace réservé ?-Voir.js-php.cn

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

王林

Libérer： 2023-06-25 09:00:15

original

1330 Les gens l'ont consulté

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.

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

Copier après la connexion

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 // 图片加载的尝试次数
})

Copier après la connexion

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.

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">

Copier après la connexion

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

<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>

Copier après la connexion

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

rrreee