Detaillierte Erläuterung des Vue Lazyload-Beispiels für verzögertes Laden von Bildern

cnpm und vue-lazyload -S
oder npm i vue-lazyload -S

Vue von „vue“ importieren
App aus „./App“ importieren
Router aus „./router“ importieren
//【1】Lazy Loading importieren importiere VueLazyload von 'vue-lazyload'
Vue.use(VueLazyload) //【1】Lazy Loading verwenden (wählen Sie 1 aus dem folgenden Satz aus)
 
//【1】Verwenden Sie Lazy Loading und geben Sie die globale Konfiguration ein, sodass bei Verwendung keine Fehlerbilder usw. konfiguriert werden müssen (wählen Sie 1 von 2 aus).
// Vue.use(VueLazyload, {
// preLoad: 1.3, // Ladezeit // Fehler: „dist/error.png“, // zeige dieses Bild an, wenn ein Bildfehler auftritt // wird geladen: „dist/loading.gif“, // zeige dieses Bild während des Ladens an // Versuch: 1 // Standardanzahl geladener Bilder // })
 
Vue.config.productionTip = falsch
 
/* eslint-deaktivieren Sie no-new */
neuer Vue({
    el: '#app',
    Router,
    Vorlage: '<App/>',
    Komponenten:
        App
    }
})

<Vorlage>
    <div>
        <!--【2】Lazy-Loading-Methode verwenden v-lazy='xxx'-->
        <img v-lazy="imgUrl"/>
        <img v-lazy="imgObj" />
    </div>
</Vorlage>
<Skript>
     
Standard exportieren{
    Name:"faul",
    Daten(){
        zurückkehren {
        // [1] Bildfehleranzeige etc. definieren (Import von Bildern, wenn in js, muss erforderlich sein)
        imgObj: {
            preLoad: 1.3, //Ladezeit src: "http://www.wwtliu.com/sxtstu/blueberrypai/indexImg/banner1.jpg", //Echter Bildfehler: require("../assets/error.jpg"), //Wenn ein Fehler auftritt, wird dieses Bild beim Laden angezeigt: require("../assets/loadingding.jpg"), //Dieses Bild während des Ladeversuchs anzeigen: 1, //Standardanzahl der zu ladenden Bilder},
        imgUrl:"http://www.wwtliu.com/sxtstu/blueberrypai/indexImg/banner2.jpg" //Fügen Sie nur eine Zeile hinzu, nämlich das eigentliche Bild}
    }
}  
</Skript>
 
<Stil></Stil>