So verwenden Sie Vue, um das verzögerte Laden von Bildern zu implementieren

Mit der rasanten Entwicklung des Internets verwenden immer mehr Websites und Anwendungen eine große Anzahl von Bildern. Diese Bilder verbessern das Surferlebnis der Benutzer erheblich, üben aber auch großen Druck auf die Leistung der Website aus Es ist notwendig, die Bild-Lazy-Loading-Technologie zu verwenden, um die Auslastung der Website zu reduzieren. Vue ist ein beliebtes Front-End-Framework, das eine sehr praktische Implementierungsmethode für das verzögerte Laden von Bildern bietet.

Das Prinzip des verzögerten Ladens von Bildern besteht darin, nur die Bilder im sichtbaren Bereich auf der Seite zu laden und dann andere Bilder dynamisch zu laden, wenn der Benutzer durch die Seite scrollt. Die Implementierungsmethode besteht darin, den Vue-Befehl v-lazy zu verwenden Im Folgenden erfahren Sie, wie Sie das verzögerte Laden von Bildern in Vue implementieren.

Zuerst müssen wir das Vue-Lazyload-Plug-In im Projekt installieren, das über npm installiert werden kann.

npm install vue-lazyload --save

Dann führen wir das Plugin in main.js ein und mounten es auf der Vue-Instanz.

import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload)

Jetzt zeigen wir Ihnen im Detail, wie Sie v-lazy verwenden.

<template>
  <div class="container">
    <img src="/static/imghw/default1.png"  data-src="img.src"  class="lazy"  v-for="img in images" : v-lazy="img.src" alt="">
  </div>
</template>

Die Bilder hier sind ein Array mit allen Bildinformationen, wobei jedes Element ein Objekt ist, einschließlich des Pfads des Bildes und anderer verwandter Informationen, wie zum Beispiel:

images: [
  {
    src: 'http://www.example.com/image1.jpg',
    name: 'image1',
    alt: 'image1'
  },
  {
    src: 'http://www.example.com/image2.jpg',
    name: 'image2',
    alt: 'image2'
  },
  {
    src: 'http://www.example.com/image3.jpg',
    name: 'image3',
    alt: 'image3'
  }
]

Als nächstes müssen wir dem Bild Stile hinzufügen dass es einen Platzhalter anzeigt, wenn es nicht geladen ist. Zum Beispiel:

img {
  width: 100%;
  height: auto;
  display: block;
  background: #f5f5f5;
}

Jetzt haben wir die Implementierung des verzögerten Ladens von Bildern abgeschlossen.

Vues v-lazy-Anweisung speichert die angegebene Quelladresse in einer Variablen und setzt dann den Wert dieser Variablen auf das src-Attribut von img, sodass das Bild dynamisch geladen werden kann, wenn die Seite in den sichtbaren Bereich scrollt.

Zusammenfassung

Es ist nicht sehr schwierig, Vue zum verzögerten Laden von Bildern zu verwenden. Sie müssen lediglich die V-Lazy-Anweisung verwenden, um dies zu erreichen. Wir müssen nur das Vue-Lazyload-Plug-In installieren, es dann im Projekt einführen und konfigurieren und können unsere Site problemlos dekomprimieren. Ich hoffe, dass dieser Artikel für Sie hilfreich sein kann und dass Sie das Vue-Framework erfolgreich in Ihrer Arbeit anwenden können.

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