Cara menggunakan Vue dan Element-UI untuk melaksanakan pemuatan malas imej

Cara menggunakan Vue dan Element-UI untuk melaksanakan pemuatan malas imej

Pemuatan malas ialah teknologi yang melambatkan pemuatan imej, yang boleh meningkatkan kelajuan pemuatan halaman secara berkesan, menjimatkan lebar jalur dan meningkatkan pengalaman pengguna. Dalam projek Vue, kita boleh menggunakan Element-UI dan beberapa pemalam untuk melaksanakan fungsi pemuatan malas imej. Artikel ini akan memperkenalkan cara menggunakan Vue dan Element-UI untuk melaksanakan pemuatan malas imej dan melampirkan contoh kod yang sepadan.

1. Pasang kebergantungan yang diperlukan

Sebelum kita mula, kita perlu memasang beberapa kebergantungan yang diperlukan:

1. Pasang Vue: Anda boleh menggunakan alat perancah rasmi Vue CLI untuk mencipta projek Vue baharu. Untuk kaedah pemasangan khusus, sila rujuk dokumentasi rasmi Vue.
2. Pasang Element-UI: Element-UI ialah satu set perpustakaan komponen desktop berdasarkan Vue yang boleh membina antara muka web yang cantik dengan cepat. Element-UI boleh dipasang melalui npm: npm install element-ui.
3. Pasang pemalam vue-lazyload: Pemalam ini ialah pustaka pemuatan malas imej Vue, yang boleh melaksanakan fungsi pemuatan malas imej. vue-lazyload boleh dipasang melalui npm: npm install vue-lazyload.

2. Konfigurasikan pemuatan malas

Dalam fail masukan projek main.js, kita perlu membuat beberapa konfigurasi untuk mendayakan fungsi pemuatan malas imej. Mula-mula, kami memperkenalkan pemalam vue-lazyload:

import VueLazyload from 'vue-lazyload'

Kemudian, kami menggunakan kaedah Vue.use() untuk memasang pemalam vue-lazyload:

Vue.use(VueLazyload)

Seterusnya, kami boleh mengkonfigurasi beberapa pilihan vue- pemalam lazyload dalam contoh Vue. Terdapat dua pilihan utama yang perlu dikonfigurasikan: memuatkan dan ralat. Pilihan pemuatan menunjukkan imej pemegang tempat yang dipaparkan semasa imej sedang dimuatkan; pilihan ralat menunjukkan imej ralat yang dipaparkan apabila imej gagal dimuatkan. Berikut ialah contoh konfigurasi:

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

3. Gunakan lazy loading

Menggunakan lazy loading dalam komponen Vue adalah sangat mudah. Pertama, kita perlu menambah arahan v-lazy pada teg img dalam templat untuk menentukan pautan imej yang akan dimuatkan dengan malas. Berikut ialah contoh:

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

Kemudian, tentukan pembolehubah imageSrc dalam data Vue, dan tetapkan pautan imej untuk dimuatkan secara malas ke pembolehubah imageSrc. Berikut ialah contoh:

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

Sekarang, apabila kita menjalankan projek dan mengakses komponen yang mengandungi kod di atas, imej tidak akan dimuatkan sehingga ia ditatal ke kawasan yang boleh dilihat. Pada masa yang sama, semasa proses pemuatan imej, imej pemegang tempat akan dipaparkan terlebih dahulu Jika pemuatan gagal, imej ralat akan dipaparkan.

4. Gunakan pemuatan malas dalam komponen senarai Elemen-UI

Selain menggunakan pemuatan malas dalam teg img biasa, kami juga boleh menggunakan pemuatan malas dalam komponen senarai Elemen-UI. Contohnya, dalam komponen ElTable, kita boleh menggunakan slot berskop untuk menyesuaikan kandungan lajur, dan kemudian menggunakan pemuatan malas dalam lajur tersuai. Berikut ialah contoh:

<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>

Dalam contoh di atas, kami memperoleh data baris semasa melalui skop slot, dan menetapkan pautan imej baris semasa kepada arahan v-lazy bagi teg img.

5. Ringkasan

Dengan memperkenalkan pemalam vue-lazyload, kami boleh melaksanakan fungsi pemuatan malas imej dengan mudah dalam projek Vue. Sama ada anda menggunakan pemuatan malas dalam teg img biasa atau menggunakan pemuatan malas dalam komponen senarai Elemen-UI, anda boleh menggunakan pemalam vue-lazyload untuk mencapainya. Saya harap artikel ini dapat membantu anda memahami dan menggunakan Vue dan Element-UI untuk melaksanakan pemuatan imej yang malas.

Atas ialah kandungan terperinci Cara menggunakan Vue dan Element-UI untuk melaksanakan pemuatan malas imej. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!