Wie implementiert man mit Vue das verzögerte Laden von Bildern und Platzhalterbildern?

Auf Websites werden häufig Bilder verwendet, und die Frage, wie das Laden von Bildern optimiert werden kann, ist zu einem Schwerpunkt der Entwickler geworden. Eine der wichtigen Optimierungen ist das verzögerte Laden von Bildern. Dies bedeutet, dass Bilder im sichtbaren Bereich nur geladen werden, wenn der Benutzer auf der Webseite scrollt, und nicht im nicht gescrollten Bereich geladen werden, wodurch der Ladedruck der Seite verringert und die Leistung verbessert wird Benutzererfahrung.

Bei Verwendung des Vue-Frameworks können Sie das verzögerte Laden von Bildern und Platzhalterbildern einfach implementieren, indem Sie die darin enthaltenen Anweisungen verwenden.

1. Für die Implementierung des Lazy Loading von Bildern können wir die Vue-Lazyload-Bibliothek verwenden. Zuerst müssen Sie die Bibliothek mit npm installieren:

npm i vue-lazyload -S

2. Führen Sie die Bibliothek in die Vue-Eingabedatei main.js ein und konfigurieren Sie sie:

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

Unter anderem gibt preLoad das vorinstallierte Seitenverhältnis an, wenn Sie es beispielsweise festlegen auf 1,3, wenn das Bild vorab geladen wird, beträgt die Breite das 1,3-fache der Zielbreite; beim Laden handelt es sich um die Bildplatzhalterbilder, und beim Ladeversuch handelt es sich um die Anzahl der Versuche, das Bild zu laden.

3. Ersetzen Sie an der Position des Bildes, das langsam geladen werden muss, das Attribut src durch den Befehl 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

auf der Seite Geben Sie den Bereich an, in dem Lazy Loading aktiviert werden muss:
5. rrreee
Der obige Code zeigt eine Liste von Bildern in einer Schleife auf der Seite an. Jedes Bild verwendet Lazy Loading. Geben Sie gleichzeitig den Bereich an Dabei ist das verzögerte Laden in der Hook-Funktion mount aktiviert. Der Bereich ist das Modul container, sodass ein verzögertes Laden von Bildern erreicht werden kann.
🎜 Was die Produktion von Platzhalterbildern betrifft, können Sie Online-Tools oder Tools wie PhotoShop verwenden, um Platzhalterbilder zu erstellen, die zu Ihrem Website-Stil passen. 🎜🎜🎜Durch die oben genannten Schritte können Sie in Vue problemlos den Effekt des verzögerten Ladens von Bildern und Platzhalterbildern erzielen, wodurch der Ladedruck der Website erheblich verringert und die Benutzererfahrung verbessert werden kann. 🎜

Das obige ist der detaillierte Inhalt vonWie implementiert man mit Vue das verzögerte Laden von Bildern und Platzhalterbildern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!