Bagaimana untuk melaksanakan pemuatan malas imej dalam uniapp

Cara melaksanakan pemuatan malas imej dalam uniapp

Dalam aplikasi mudah alih moden dan pembangunan web, imej merupakan elemen yang sangat diperlukan. Walau bagaimanapun, disebabkan oleh pengehadan rangkaian mudah alih dan keperluan pengalaman pengguna, memuatkan sejumlah besar imej pada masa yang sama boleh menyebabkan kelajuan pemuatan aplikasi atau halaman web menjadi perlahan, menjejaskan pengalaman pengguna. Untuk menyelesaikan masalah ini, anda boleh menggunakan teknologi pemuatan malas imej, yang boleh melambatkan pemuatan imej dan hanya mula memuatkan apabila ia memasuki kawasan yang boleh dilihat pengguna, meningkatkan kelajuan pemuatan halaman dan pengalaman pengguna.

UniApp ialah rangka kerja pembangunan aplikasi merentas platform berdasarkan Vue.js Ia boleh menjana aplikasi yang dijalankan pada iOS, Android, H5 dan platform lain secara serentak. Dalam UniApp, anda boleh menggunakan beberapa pemalam dan teknologi untuk melaksanakan pemuatan malas imej. Yang berikut akan menunjukkan cara menggunakan pemalam vue-lazyload dan Intersection Observer API untuk melaksanakan pemuatan malas imej.

Mula-mula, pasang pemalam vue-lazyload dalam projek UniApp. Buka alat baris arahan, tukar ke direktori akar projek UniApp anda, dan jalankan arahan berikut:

npm install vue-lazyload

Selepas pemasangan selesai, perkenalkan gaya yang berkaitan dalam fail uni.scss:

@import 'path/ to/node_modules/vue-lazyload/style/uni.scss';

Kemudian, dalam komponen imej yang perlu dimuatkan secara malas, gunakan arahan v-lazy untuk menangguhkan memuatkan imej. Contohnya:

d477f9ce7bf77f53fbcf36bec1b69b7a
87601458bc7b519de4aaf92067cd0cca
21c97d3a051048b8e55e3c8f199a54b2

di mana imageUrl ialah alamat imej. Dengan cara ini, apabila imej memasuki kawasan yang boleh dilihat pengguna, imej akan mula dimuatkan, meningkatkan kelajuan pemuatan halaman.

Seterusnya, untuk mencapai kesan memuatkan imej apabila ia memasuki kawasan visual pengguna, kita boleh menggunakan Intersection Observer API. Mula-mula, mulakan objek Pemerhati Persimpangan dalam fungsi cangkuk kitaran hayat komponen dan pantau keterlihatan elemen imej. Contohnya:

855348821b2e8f2cc4b633bf98f064df
eksport lalai {

mounted() {
  const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        this.loadImage(entry.target);
      }
    });
  });

  const lazyImages = document.querySelectorAll('img[v-lazy]');
  lazyImages.forEach((lazyImage) => {
    observer.observe(lazyImage);
  });
},

methods: {
  loadImage(image) {
    image.src = image.dataset.src;
  },
},

}
713e1e4451c8393b8e637e129c6b7b12

Dalam fungsi cangkuk kitaran hayat yang dipasang, cipta objek Pemerhati Persimpangan dan hantarkan fungsi panggil balik. Fungsi panggil balik ini dicetuskan apabila elemen yang diperhatikan memasuki atau meninggalkan kawasan visual pengguna. Dalam fungsi panggil balik, lintasi senarai elemen yang diperhatikan Jika elemen memasuki kawasan yang boleh dilihat pengguna, panggil kaedah loadImage untuk memuatkan imej.

Dalam kaedah loadImage, tetapkan atribut data-src imej kepada atribut src imej, supaya imej mula dimuatkan.

Di atas adalah langkah-langkah untuk melaksanakan fungsi pemuatan malas imej dalam UniApp menggunakan pemalam vue-lazyload dan Intersection Observer API. Dengan menangguhkan pemuatan imej, masa memuatkan halaman boleh dikurangkan dengan banyaknya dan pengalaman pengguna bertambah baik. Sudah tentu, dalam pembangunan sebenar, pelaksanaan pemuatan malas imej perlu diselaraskan dan dioptimumkan mengikut keperluan khusus projek.

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