Cara menggunakan Vue untuk melaksanakan pemuatan malas imej

Dengan perkembangan pesat Internet, semakin banyak laman web dan aplikasi menggunakan sejumlah besar gambar ini meningkatkan pengalaman menyemak imbas pengguna, tetapi juga memberikan Laman Web prestasi membawa banyak tekanan, jadi perlu menggunakan teknologi pemuatan malas imej untuk mengurangkan beban di laman web. Vue ialah rangka kerja bahagian hadapan yang popular yang menyediakan kaedah pelaksanaan yang sangat mudah untuk memuatkan imej yang malas.

Prinsip pemuatan malas imej adalah untuk memuatkan hanya imej di kawasan yang boleh dilihat pada halaman, dan memuatkan imej lain secara dinamik apabila pengguna menatal halaman Kaedah pelaksanaan adalah menggunakan arahan Vue v- malas, berikut akan memperkenalkan kepada anda cara melaksanakan pemuatan malas imej dalam Vue.

Pertama sekali, kita perlu memasang pemalam vue-lazyload dalam projek, yang boleh dipasang melalui npm.

npm install vue-lazyload --save

Kemudian kami memperkenalkan pemalam dalam main.js dan memasangnya pada contoh Vue.

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

Sekarang mari tunjukkan cara menggunakan v-lazy secara terperinci.

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

Imej di sini ialah tatasusunan yang mengandungi semua maklumat imej, di mana setiap elemen ialah objek, termasuk laluan imej dan maklumat lain yang berkaitan, seperti:

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'
  }
]

#🎜🎜 # Seterusnya, kita perlu menambah gaya pada imej supaya ia memaparkan ruang letak apabila ia tidak dimuatkan. Contohnya:

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

Kini, kami telah menyelesaikan pelaksanaan pemuatan imej yang malas.

Arahan v-lazy Vue akan menyimpan alamat sumber yang ditentukan dalam pembolehubah, dan kemudian menetapkan nilai pembolehubah ini kepada atribut src img, supaya imej boleh ditatal ke halaman yang boleh dilihat. Muatkan rantau ini secara dinamik.

Ringkasan

Menggunakan Vue untuk melaksanakan pemuatan malas imej bukanlah perkara yang sangat sukar, hanya gunakan arahan v-lazy. Kami hanya perlu memasang pemalam vue-lazyload, kemudian memperkenalkan dan mengkonfigurasinya dalam projek, dan kami dengan senang hati boleh menyahmampat tapak kami. Saya harap artikel ini dapat membantu anda dan saya harap anda boleh menggunakan rangka kerja Vue dengan jayanya dalam kerja anda.

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