Bagaimana untuk melaksanakan pemuatan malas imej dalam JavaScript?

Bagaimana untuk melaksanakan pemuatan malas imej dalam JavaScript?

Dengan pembangunan Internet mudah alih, bilangan imej pada halaman web semakin meningkat, menjadikan kelajuan pemuatan halaman lebih perlahan dan pengalaman pengguna merosot. Untuk menyelesaikan masalah ini, fungsi pemuatan malas imej telah wujud. Pemuatan imej yang malas bermakna apabila pengguna menatal ke kedudukan imej, imej itu dimuatkan semula untuk meningkatkan kelajuan pemuatan halaman web. Artikel ini akan memperkenalkan cara menggunakan JavaScript untuk melaksanakan pemuatan malas imej dan memberikan contoh kod khusus.

1. Pertama, kita perlu menandakan atribut khusus untuk imej dimuatkan dengan malas. Dalam contoh ini, kami menggunakan "data-src" sebagai atribut teg dan menyimpan alamat sebenar imej dalam atribut ini.

<img src="placeholder.jpg" data-src="image.jpg" alt="Lazy Load Image">

2. Seterusnya, kita perlu mendengar acara tatal halaman melalui JavaScript dan menentukan sama ada imej memasuki kawasan yang boleh dilihat.

function lazyLoadImages() {
    var lazyImages = document.querySelectorAll('img[data-src]');
    
    lazyImages.forEach(function(img) {
        if(isElementInViewport(img)) {
            img.src = img.getAttribute('data-src');
            img.removeAttribute('data-src');
        }
    });
}

function isElementInViewport(el) {
    var rect = el.getBoundingClientRect();
    return (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= window.innerHeight &&
        rect.right <= window.innerWidth
    );
}

window.addEventListener('scroll', lazyLoadImages);
window.addEventListener('resize', lazyLoadImages);

3. Apabila penyemak imbas menatal atau mengubah saiz tetingkap, acara scroll dan resize akan dicetuskan Kami boleh memanggil lazyLoadImages berfungsi untuk menentukan dan memuatkan imej. <code>scroll 和 resize 事件，我们可以在这两个事件中调用 lazyLoadImages 函数来判断并加载图片。
4. 最后，在页面加载完成后立即执行一次 lazyLoadImages
Akhir sekali, laksanakan fungsi lazyLoadImages sekali sejurus selepas halaman dimuatkan untuk memuatkan imej di kawasan yang kelihatan pada skrin pertama.

window.addEventListener('load', lazyLoadImages);

Melalui empat langkah di atas, kita boleh melaksanakan fungsi pemuatan malas imej. Apabila pengguna menatal ke kedudukan imej, imej akan dimuatkan secara automatik, sekali gus meningkatkan kelajuan pemuatan halaman.

Ringkasan:

Malas memuatkan imej menyimpan alamat sebenar imej dalam atribut tertentu, mendengar tatal halaman dan peristiwa mengubah saiz tetingkap untuk menentukan sama ada imej memasuki kawasan yang boleh dilihat dan memuatkan imej berdasarkan keputusan penghakiman. Teknologi ini amat penting pada peranti mudah alih dan dalam persekitaran dengan prestasi rangkaian yang lemah untuk meningkatkan pengalaman pengguna dan mengurangkan beban pelayan.

Di atas ialah pengenalan kepada cara JavaScript melaksanakan fungsi pemuatan malas imej dan menyediakan contoh kod yang sepadan. Harap ini membantu! 🎜

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