Amalan terbaik untuk melaksanakan pemuatan malas imej dalam Vue

Dengan perkembangan teknologi Internet yang berterusan, kelajuan halaman web secara beransur-ansur menjadi penunjuk utama yang mempengaruhi pengalaman pengguna. Untuk meningkatkan kelajuan memuatkan halaman web, kami biasanya mempertimbangkan untuk menggunakan pemuatan imej yang malas. Pemuatan imej yang malas bermakna memuatkan imej apabila halaman menatal ke kedudukan tertentu Ini boleh mengelakkan masalah memuatkan sejumlah besar imej sekaligus, menyebabkan halaman dimuatkan terlalu perlahan.

Artikel ini akan memperkenalkan amalan terbaik menggunakan Vue untuk melaksanakan pemuatan malas imej.

1. Memperkenalkan perpustakaan pihak ketiga vue-lazyload

Rangka kerja Vue itu sendiri tidak menyediakan fungsi pemuatan malas imej, jadi kami perlu menggunakan perpustakaan pihak ketiga untuk mencapai ia. Perpustakaan memuatkan malas yang biasa digunakan termasuk vue-lazyload, lozad.js, dsb. Artikel ini mengesyorkan menggunakan perpustakaan vue-lazyload kerana ia mempunyai ciri-ciri berikut:

1. Ringan: Saiz kod vue-lazyload adalah sangat kecil, hanya bersaiz 2KB selepas pemampatan gzip.
2. Adaptif: vue-lazyload boleh memuatkan imej dengan lebar yang berbeza mengikut saiz skrin peranti berbeza, dengan itu menjimatkan sumber rangkaian.
3. Sokongan vue2 dan vue3: vue-lazyload boleh menyokong kedua-dua Vue versi 2 dan 3.

Pasang vue-lazyload

Kita boleh menggunakan npm atau yarn untuk memasang vue-lazyload:

npm install vue-lazyload

atau

yarn add vue-lazyload

import vue-lazyload

Dalam fail masukan Vue, import perpustakaan vue-lazyload dan daftarkannya secara global:

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

Vue.use(VueLazyload)

2. Gunakan arahan lazyload dalam templat

Selepas menggunakan vue -lazyload library , kita hanya perlu menggunakan arahan lazyload dalam templat untuk melaksanakan pemuatan malas imej. Penggunaannya adalah seperti berikut:

<template>
  <img src="/static/imghwm/default1.png"  data-src="占位符图片"  class="lazy"  v-lazy="imageURL" alt="图片说明">
</template>

Antaranya, imageURL mewakili alamat URL imej, dan alt mewakili teks penerangan imej.

Perlu diambil perhatian bahawa untuk mengelakkan imej daripada dipaparkan sebelum ia dimuatkan, kami mengesyorkan menetapkan imej pemegang tempat dalam teg img dengan saiz yang sama seperti imej, seperti yang ditunjukkan di bawah:

<template>
  <img src="/static/imghwm/default1.png"  data-src="占位符图片"  class="lazy"  v-lazy="imageURL" alt="图片说明">
</template>

3. Konfigurasikan lazyload

Dalam fail entri Vue, kita boleh mengkonfigurasi vue-lazyload secara global, seperti yang ditunjukkan di bawah:

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

Vue.use(VueLazyload, {
  preLoad: 1.3, // 预加载的高度比例，默认为1.3
  error: '错误时显示的图片URL', // 图片加载失败时显示的图片
  loading: '加载中显示的图片URL', // 图片加载时显示的图片
  attempt: 1 // 图片加载失败后重新加载的次数，默认为1
})

Di mana, praMuat mewakili jarak antara imej dan bahagian bawah skrin Jarak untuk mula memuatkan, lalai ialah 1.3, iaitu imej akan mula dimuatkan pada jarak 1.3 kali ketinggian skrin semasa dari bahagian bawah halaman. ralat menunjukkan alamat imej yang dipaparkan apabila imej gagal dimuatkan, pemuatan menunjukkan alamat imej yang dipaparkan apabila imej dimuatkan, percubaan menunjukkan bilangan muat semula selepas imej gagal dimuatkan, dan lalai ialah 1.

4. Kesimpulan

Artikel ini memperkenalkan amalan terbaik menggunakan pustaka vue-lazyload untuk melaksanakan pemuatan malas imej pengalaman pengguna halaman. Akhir sekali, saya ingin mengingatkan semua orang bahawa apabila menggunakan pemuatan malas imej, anda juga harus memberi perhatian untuk mengawal jarak pramuat dan masa pemuatan dengan betul untuk mengelakkan penggunaan sumber rangkaian dan trafik telefon mudah alih yang berlebihan.

Atas ialah kandungan terperinci Amalan terbaik untuk melaksanakan pemuatan malas imej dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!