Melaksanakan fungsi pemuatan malas berdasarkan JavaScript

Melaksanakan fungsi pemuatan malas berdasarkan JavaScript

Pemuatan malas ialah teknologi pengoptimuman bahagian hadapan yang biasa digunakan yang direka untuk meningkatkan kelajuan pemuatan dan pengalaman pengguna halaman. Melalui pemuatan malas, sumber tertentu dalam halaman (seperti imej, video, teks, dll.) boleh ditangguhkan sehingga pengguna memerlukan atau akan menyemak imbasnya, dengan itu mengurangkan permintaan rangkaian dan pemuatan halaman semasa pemuatan pertama.

Dalam artikel ini, kami akan memperkenalkan cara menggunakan JavaScript untuk melaksanakan fungsi pemuatan malas dan memberikan contoh kod.

1. Prinsip pemuatan malas

Prinsip pemuatan malas adalah untuk memuatkan sumber apabila halaman menatal ke kedudukan tertentu atau pengguna beroperasi ke tempat di mana sumber perlu dimuatkan dengan mendengar acara tatal halaman atau tingkah laku interaktif yang lain .

2. Langkah untuk melaksanakan pemuatan malas

2.1 Pertama, anda perlu menambah pengecam khusus pada elemen yang perlu dimuatkan secara malas. Ia boleh menjadi atribut kelas atau atribut data, dsb. Sebagai contoh, tambahkan atribut kelas "malas" pada imej yang perlu dimuatkan dengan malas.

Antaranya, atribut src ialah imej pemegang tempat dan data-src atribut ialah alamat imej sebenar.

2.2 Selepas halaman dimuatkan, gunakan JavaScript untuk mendapatkan semua elemen dengan bendera pemuatan malas dan mengikat acara tatal. . perubahan saiz. Setiap kali ia mengesan tatal atau perubahan saiz tetingkap, fungsi lazyLoad akan dipanggil.

Fungsi lazyLoad merentasi semua imej pemuatan malas dan semak sama ada ia berada dalam kawasan yang boleh dilihat. Jika ya, tetapkan atribut data-src kepada src, iaitu, muatkan imej sebenar dan alih keluar atribut kelas kepada malas. Gunakan fungsi isInViewport di atas untuk menentukan sama ada elemen berada dalam kawasan yang boleh dilihat.

Ringkasan

3. Lazy loading ialah teknologi bahagian hadapan yang sangat praktikal, yang bukan sahaja meningkatkan prestasi halaman web, tetapi juga meningkatkan pengalaman pengguna. Melaksanakan fungsi pemuatan malas melalui JavaScript boleh mengurangkan masa pemuatan halaman dan permintaan rangkaian.

Saya harap artikel ini akan membantu anda memahami kaedah pelaksanaan pemuatan malas, dan saya harap anda boleh membuat pengubahsuaian dan pengoptimuman yang sepadan mengikut keperluan projek anda sendiri. Saya doakan anda mendapat hasil yang baik apabila menggunakan teknologi pemuatan malas!

Sampel kod selesai.

Atas ialah kandungan terperinci Melaksanakan fungsi pemuatan malas berdasarkan JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!