So verwenden Sie Vue und Element-UI, um das verzögerte Laden von Bildern zu implementieren

So verwenden Sie Vue und Element-UI, um das verzögerte Laden von Bildern zu implementieren

Lazy Loading ist eine Technologie, die das Laden von Bildern verzögert, wodurch die Seitenladegeschwindigkeit effektiv erhöht, Bandbreite gespart und die Benutzererfahrung verbessert werden kann. Im Vue-Projekt können wir Element-UI und einige Plug-Ins verwenden, um die Funktion zum verzögerten Laden von Bildern zu implementieren. In diesem Artikel wird erläutert, wie Sie mit Vue und Element-UI das verzögerte Laden von Bildern implementieren und entsprechende Codebeispiele anhängen.

1. Installieren Sie die notwendigen Abhängigkeiten

Bevor wir beginnen, müssen wir einige notwendige Abhängigkeiten installieren:

1. Vue installieren: Sie können Vues offizielles Gerüsttool Vue CLI verwenden, um ein neues Vue-Projekt zu erstellen. Informationen zu bestimmten Installationsmethoden finden Sie in der offiziellen Vue-Dokumentation.
2. Element-UI installieren: Element-UI ist eine Reihe von Desktop-Komponentenbibliotheken, die auf Vue basieren und schnell schöne Weboberflächen erstellen können. Element-UI kann über npm installiert werden: npm install element-ui.
3. Installieren Sie das Vue-Lazyload-Plug-In: Dieses Plug-In ist die Bild-Lazy-Loading-Bibliothek von Vue, die die Lazy-Loading-Funktion von Bildern implementieren kann. vue-lazyload kann über npm installiert werden: npm install vue-lazyload.

2. Lazy Loading konfigurieren

In der Eintragsdatei main.js des Projekts müssen wir einige Konfigurationen vornehmen, um die Bild-Lazy-Loading-Funktion zu aktivieren. Zuerst stellen wir das Vue-Lazyload-Plug-In vor:

import VueLazyload from 'vue-lazyload'

Dann verwenden wir die Methode Vue.use(), um das Vue-Lazyload-Plug-In zu installieren:

Vue.use(VueLazyload)

Als nächstes können wir einige Optionen des Vue-Lazyload-Plug-Ins konfigurieren: Lazyload-Plug-in in der Vue-Instanz. Es gibt zwei Hauptoptionen, die konfiguriert werden müssen: Laden und Fehler. Die Ladeoption gibt das Platzhalterbild an, das angezeigt wird, wenn das Bild geladen wird. Die Fehleroption gibt das Fehlerbild an, das angezeigt wird, wenn das Bild nicht geladen werden kann. Das Folgende ist eine Beispielkonfiguration:

Vue.use(VueLazyload, {
  loading: require('路径/加载中图片.png'),
  error: require('路径/加载失败图片.png')
})

3. Lazy Loading verwenden

Die Verwendung von Lazy Loading in Vue-Komponenten ist sehr einfach. Zuerst müssen wir die v-lazy-Direktive zum img-Tag in der Vorlage hinzufügen, um den Bildlink anzugeben, der träge geladen werden soll. Das Folgende ist ein Beispiel:

<template>
  <div>
    <img v-lazy="imageSrc" alt="图片">
  </div>
</template>

Definieren Sie dann die Variable imageSrc in den Daten von Vue und weisen Sie der Variablen imageSrc den Bildlink zu, der verzögert geladen werden soll. Hier ist ein Beispiel:

export default {
  data() {
    return {
      imageSrc: '要懒加载的图片链接'
    }
  }
}

Wenn wir nun das Projekt ausführen und auf die Komponente zugreifen, die den obigen Code enthält, wird das Bild erst geladen, wenn es in den sichtbaren Bereich gescrollt wird. Gleichzeitig wird während des Bildladevorgangs zuerst das Platzhalterbild angezeigt. Wenn das Laden fehlschlägt, wird das Fehlerbild angezeigt.

4. Verwenden Sie Lazy Loading in Element-UI-Listenkomponenten

Zusätzlich zur Verwendung von Lazy Loading in gewöhnlichen IMG-Tags können wir Lazy Loading auch in Element-UI-Listenkomponenten verwenden. In der ElTable-Komponente können wir beispielsweise Bereichsslots verwenden, um den Spalteninhalt anzupassen, und dann Lazy Loading in den benutzerdefinierten Spalten verwenden. Das Folgende ist ein Beispiel:

<template>
  <div>
    <el-table :data="tableData">
      <el-table-column label="图片">
        <template slot-scope="scope">
          <img v-lazy="scope.row.imageSrc" alt="图片">
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

Im obigen Beispiel erhalten wir die Daten der aktuellen Zeile über Slot-Scope und weisen den Bildlink der aktuellen Zeile der v-lazy-Anweisung des img-Tags zu.

5. Zusammenfassung

Durch die Einführung des Vue-Lazyload-Plug-Ins können wir die Bild-Lazy-Loading-Funktion problemlos im Vue-Projekt implementieren. Unabhängig davon, ob Sie Lazy Loading in gewöhnlichen IMG-Tags oder Lazy Loading in Element-UI-Listenkomponenten verwenden, können Sie dies mit dem Vue-Lazyload-Plug-In erreichen. Ich hoffe, dieser Artikel kann Ihnen helfen, Vue und Element-UI zu verstehen und zu verwenden, um das verzögerte Laden von Bildern zu implementieren.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Vue und Element-UI, um das verzögerte Laden von Bildern zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!