Cara mengendalikan pemuatan malas dan pemegang tempat imej dalam Vue

Cara menangani pemuatan malas dan mengambil ruang imej dalam Vue

Lazy Loading ialah teknologi pengoptimuman prestasi yang boleh melambatkan pemuatan imej dalam halaman web dan hanya memuatkannya apabila pengguna menatal ke lokasi imej , untuk mengurangkan masa pemuatan awal dan penggunaan lebar jalur rangkaian. Pada masa yang sama, penggunaan teknologi pemegang tempat dapat mengekalkan kestabilan susun atur halaman dan mengelakkan masalah gangguan susun atur halaman yang disebabkan oleh pemuatan imej yang perlahan. Artikel ini akan memperkenalkan cara melaksanakan pemuatan malas dan fungsi pemegang tempat imej dalam Vue, dan menyediakan contoh kod khusus.

1. Pasang pemalam

Pertama, kita perlu memasang pemalam Vue untuk melaksanakan fungsi pemuatan malas imej. Adalah disyorkan untuk menggunakan pemalam vue-lazyload, yang mudah digunakan dan mempunyai keserasian yang tinggi. Pasang melalui arahan berikut:

npm install vue-lazyload --save

2. Konfigurasikan pemalam

Dalam fail kemasukan Vue (biasanya main.js), kita perlu memperkenalkan dan mengkonfigurasi pemalam vue-lazyload. Konfigurasi khusus boleh dilaraskan mengikut keperluan sebenar Berikut ialah contoh konfigurasi yang biasa digunakan:

import Vue from 'vue'
import VueLazyload from 'vue-lazyload'

Vue.use(VueLazyload, {
  preLoad: 1.3, // 预加载高度的比例
  error: 'error.jpg', // 图片加载失败时显示的占位图片
  loading: 'loading.gif', // 图片加载过程中显示的占位图片
  attempt: 3 // 加载失败后的重试次数
})

Dalam konfigurasi di atas, kami menetapkan imej pemegang tempat yang dipaparkan apabila pemuatan imej gagal menjadi ralat.jpg, dan imej pemegang tempat dipaparkan semasa. proses pemuatan imej Imej sedang dimuatkan.gif, dan percubaan dibuat untuk memuatkan semula imej sehingga 3 kali selepas gagal memuatkan.

3. Aplikasi plug-in

Di mana imej digunakan secara khusus, kita boleh dengan malas memuatkan imej melalui arahan v-lazy, dan menggunakan arahan v-loading untuk menambah kesan ruang letak semasa proses pemuatan imej. Berikut ialah contoh menggunakan pemalam vue-lazyload untuk melaksanakan pemuatan malas dan pemegang tempat imej:

<template>
  <div>
    <img  v-lazy="imageSrc" v-loading="isLoading" / alt="Cara mengendalikan pemuatan malas dan pemegang tempat imej dalam Vue" >
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageSrc: '', // 实际图片的地址
      isLoading: true // 控制加载过程中的占位效果
    }
  },
  mounted() {
    // 模拟获取实际图片地址的过程
    setTimeout(() => {
      this.imageSrc = 'realImage.jpg'
      this.isLoading = false
    }, 1000)
  }
}
</script>

Dalam kod di atas, kami mengikat alamat sebenar imej kepada atribut imageSrc melalui arahan v-lazy, dan gunakan arahan pemuatan v untuk Kesan pemegang tempat semasa proses pemuatan terikat pada sifat isLoading. Dalam cangkuk kitaran hayat yang dipasang, kami mensimulasikan proses mendapatkan alamat sebenar imej, memberikan alamat sebenar kepada imageSrc selepas 1 saat, dan menetapkan isLoading kepada false untuk memaparkan imej.

Dengan konfigurasi dan kod sampel di atas, kami boleh melaksanakan pemuatan malas dan fungsi pemegang tempat imej dalam Vue. Ini boleh meningkatkan kelajuan pemuatan dan pengalaman pengguna halaman web, dan mengelakkan masalah susun atur halaman yang disebabkan oleh pemuatan imej yang perlahan. Pada masa yang sama, melalui konfigurasi fleksibel pemalam vue-lazyload, kami boleh melaraskan kesan pemuatan malas dan pemegang tempat mengikut keperluan untuk mencapai hasil pengoptimuman yang lebih baik.

Atas ialah kandungan terperinci Cara mengendalikan pemuatan malas dan pemegang tempat imej dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!