Bagaimana untuk melaksanakan komponen imej malas memuatkan dalam Vue?

Vue ialah rangka kerja bahagian hadapan yang popular yang menyediakan banyak ciri dan komponen berkuasa, termasuk komponen imej. Semasa pembangunan web, memuatkan sejumlah besar imej boleh menyebabkan laman web menjadi perlahan Untuk mengurangkan tekanan ini, kami boleh melaksanakan komponen imej dalam cara pemuatan malas yang disimulasikan supaya laman web dapat dimuatkan dan dipersembahkan kepada pengguna dengan lebih cepat.

Dalam artikel ini, kita akan belajar cara menggunakan Vue untuk melaksanakan komponen imej malas memuatkan, yang merangkumi langkah berikut:

1. Membina komponen imej asas
2. Tambah fungsi memuatkan malas
3. Ujian dan Pengoptimuman

Seterusnya kami akan terangkan step by step.

1. Bina komponen gambar asas

Pertama, kita perlu membina komponen gambar asas supaya kita boleh menambah lebih banyak fungsi dalam langkah seterusnya. Anda boleh menggunakan alat baris arahan Vue CLI untuk mencipta projek asas Vue dan menambah komponen imej padanya. Dalam komponen ini, kita boleh menggunakan arahan v-bind terbina dalam Vue untuk mengikat atribut src imej dan mentakrifkan teks alt lalai.

Contoh kod:

<template>
  <img v-bind:src="src" alt="Image">
</template>

<script>
export default {
  name: "ImageComponent",
  props: {
    src: {
      type: String,
      required: true,
    },
  },
};
</script>

Seterusnya, kita boleh menggunakan komponen ini untuk memuatkan sumber imej kita.

2. Tambah fungsi tiruan lazy loading

Seterusnya, kita akan gunakan ciri-ciri Vue untuk menambah fungsi tiruan lazy loading. Apabila tapak web dimulakan, kami hanya perlu memuatkan kandungan imej bahagian halaman yang kelihatan dan kandungan lain akan dimuatkan apabila pengguna menatal halaman. Untuk melakukan ini, kita perlu menggunakan arahan terbina dalam Vue v-sekali untuk memuatkan imej bagi memastikan setiap komponen hanya akan dipaparkan sekali. Kami kemudian akan menggunakan fungsi kitar hayat Vue yang dipasang untuk memeriksa sama ada komponen berada dalam kawasan yang boleh dilihat dan bertindak sewajarnya.

Dalam contoh ini, kami akan menggunakan Intersection Observer API untuk mengesan sama ada elemen itu berada dalam kawasan yang boleh dilihat. Jika elemen berada dalam kawasan yang boleh dilihat, kami memuatkan imej. Jika elemen tidak berada dalam kawasan yang boleh dilihat, tiada apa yang dilakukan. Di bawah adalah pelaksanaan mudah.

Contoh kod:

<template>
  <div ref="imageWrapper">
    <img v-bind:src="src" alt="Image" v-once>
  </div>
</template>

<script>
export default {
  name: "ImageComponent",
  props: {
    src: {
      type: String,
      required: true,
    },
  },
  mounted() {
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          this.$refs.imageWrapper.classList.add('loaded');
          observer.disconnect();
        }
      },
      {
        rootMargin: "50px 0px",
      }
    );
    observer.observe(this.$refs.imageWrapper);
  },
};
</script>

<style>
  .loaded img {
    opacity: 1;
    transition: opacity 0.5s ease-in;
  }

  img {
    opacity: 0;
  }
</style>

Dalam pelaksanaan ini, kami meletakkan komponen imej dalam elemen div dengan atribut ref, dan menambah kelas bernama dimuatkan pada elemen ini. Dalam fungsi lifehook yang dipasang, kami menggunakan IntersectionObserver API untuk mengesan sama ada elemen div berada dalam kawasan yang boleh dilihat. Jika elemen berada dalam kawasan yang boleh dilihat, kami akan menambah kelas yang dinamakan dimuatkan pada elemen div, yang mengandungi atribut kelegapan yang meningkatkan ketelusan imej daripada 0 kepada 1. Dengan menambahkan kelas ini, kita boleh menggunakan kesan peralihan CSS untuk melaksanakan proses pemuatan kecerunan imej.

3. Pengujian dan Pengoptimuman

Pada ketika ini, kami telah berjaya melaksanakan komponen imej malas memuatkan. Kini, kami boleh menggunakan komponen ini dalam projek Vue kami untuk memuatkan sumber imej kami. Walau bagaimanapun, untuk mencapai prestasi tapak yang lebih baik, kami masih memerlukan ujian dan pengoptimuman lanjut.

Untuk menguji prestasi komponen, kami boleh menggunakan alat pembangun untuk mensimulasikan sambungan internet yang perlahan. Dengan menguji kelajuan pemuatan halaman pada kelajuan rangkaian yang lebih perlahan, kami boleh memahami prestasi dan arah pengoptimuman komponen dengan lebih baik.

Selain itu, kami juga boleh mengoptimumkan rootMargin (margin akar) dan ambang (ambang) Intersection Observer API untuk menjadikan komponen lebih mudah disesuaikan dengan peranti dan resolusi yang berbeza. Kami boleh melaraskan margin akar dan ambang untuk menentukan apabila silang direkodkan, dan merekodkan maklumat pengoptimuman dalam alat pemantauan untuk analisis dan penambahbaikan selanjutnya.

Ringkasan

Dalam artikel ini, kami mempelajari cara menggunakan Vue untuk melaksanakan komponen imej yang dimuatkan secara malas. Kami mula-mula mencipta komponen imej asas dan menambah fungsi pemuatan malas simulasi menggunakan ciri Vue. Akhir sekali, kami juga membincangkan cara menguji dan mengoptimumkan komponen ini.

Melalui pelaksanaan ini, kami boleh membuat laman web memuatkan sumber imej dengan lebih pantas, dan memuatkan bahagian lain imej apabila pengguna meluncur halaman, sekali gus meningkatkan pengalaman pengguna.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan komponen imej malas memuatkan dalam Vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!