Bagaimana untuk menggunakan JavaScript untuk mencapai kesan pudar dalam memuatkan imej yang malas?

Bagaimana untuk menggunakan JavaScript untuk mencapai kesan pudar dalam memuatkan imej yang malas?

Dalam reka bentuk web moden, untuk meningkatkan pengalaman pengguna dan prestasi tapak web, pemuatan imej yang malas telah menjadi teknologi biasa. Pemuatan imej yang malas boleh mengurangkan masa pemuatan awal dengan melambatkan pemuatan imej sehingga pengguna menatal ke tempat mereka berada. Selain itu, untuk meningkatkan lagi pengalaman pengguna, menambah kesan fade-in boleh menjadikan halaman lebih lancar dan lebih menarik. Dalam artikel ini, kita akan belajar cara menggunakan JavaScript untuk melaksanakan kesan pudar dalam memuatkan imej yang malas.

Langkah pertama ialah menentukan imej mana yang perlu dimuatkan secara malas. Biasanya, kami menetapkan atribut src tag img kepada kosong, dan kemudian menyimpan alamat imej sebenar dalam atribut tersuai, seperti data-src. Dengan cara ini, imej tidak akan dimuatkan apabila halaman dimuatkan Hanya apabila pengguna menatal ke lokasi imej, alamat imej sebenar akan dimuatkan dan dipaparkan.

<img class="lazy-img" data-src="path/to/image.jpg" src="" alt="Lazy Image">

Seterusnya, kita perlu menambah beberapa kod JavaScript untuk mencapai kesan pemuatan malas. Kami akan mendengar acara tatal pengguna dan menyemak imej mana yang berada dalam kawasan yang boleh dilihat. Untuk gambar dalam kawasan yang boleh dilihat, kami menetapkan alamat sebenar mereka (iaitu, nilai atribut data-src) kepada atribut src untuk memuatkan gambar.

// 获取所有拥有lazy-img类的图片元素
const lazyImages = document.querySelectorAll('.lazy-img');

// 监听用户滚动事件
window.addEventListener('scroll', function() {
  // 循环遍历所有图片元素
  for (let i = 0; i < lazyImages.length; i++) {
    // 检查图片元素是否在可视区域内
    if (isInViewport(lazyImages[i])) {
      // 将真实的图片地址赋给src属性
      lazyImages[i].src = lazyImages[i].getAttribute('data-src');
      // 添加淡入效果
      lazyImages[i].classList.add('fade-in');
    }
  }
});

// 检查元素是否在可视区域内的函数
function isInViewport(element) {
  const rect = element.getBoundingClientRect();
  return (rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && rect.right <= (window.innerWidth || document.documentElement.clientWidth));
}

Dalam kod di atas, kami menggunakan fungsi isInViewport() untuk menyemak sama ada elemen gambar berada dalam kawasan yang boleh dilihat. Fungsi ini mendapatkan maklumat kedudukan elemen dengan memanggil kaedah getBoundingClientRect() dan membandingkannya dengan ketinggian dan lebar tetingkap. Mengembalikan benar jika elemen berada dalam kawasan yang boleh dilihat.

Akhir sekali, kami juga boleh menambah kesan fade-in pada imej supaya ia dipaparkan dengan lancar pada halaman selepas dimuatkan. Kami menambah kelas fade-in pada elemen imej, supaya selepas imej dimuatkan, kesan peralihan CSS akan dicetuskan untuk mencapai kesan animasi fade-in.

.lazy-img {
  opacity: 0;
  transition: opacity 0.3s ease-in;
}

.lazy-img.fade-in {
  opacity: 1;
}

Dalam kod di atas, kami menetapkan kelegapan imej kepada 0 pada mulanya dan kemudian secara beransur-ansur mengalihkannya kepada kelegapan penuh (iaitu 1) menggunakan kesan peralihan CSS. Proses ini berlangsung selama 0.3 saat dan dijalankan secara beransur-ansur.

Melalui langkah di atas, kita boleh menggunakan JavaScript untuk mencapai kesan pudar dalam memuatkan imej yang malas. Ini bukan sahaja meningkatkan prestasi laman web dan pengalaman pengguna, ia juga menjadikan tapak web kelihatan lebih lancar dan lebih menarik. Harap artikel ini membantu anda!

Atas ialah kandungan terperinci Bagaimana untuk menggunakan JavaScript untuk mencapai kesan pudar dalam memuatkan imej yang malas?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!