Apakah kaedah untuk memuatkan imej yang malas?

Kaedah untuk pemuatan malas imej termasuk pemuatan malas berdasarkan Pemerhati Persimpangan, pemuatan malas menggunakan pemantauan acara tatal dan pemuatan malas menggunakan setTimeout. Pengenalan terperinci: 1. Pemuatan malas berdasarkan Pemerhati Persimpangan ialah API yang disediakan oleh penyemak imbas, yang boleh memantau sama ada sesuatu elemen memasuki ruang pandang pengguna 2. Pemuatan malas menggunakan pemantauan acara tatal, yang dinilai dengan memantau peristiwa tatal. dll.

Sistem pengendalian tutorial ini: sistem Windows 10, komputer DELL G3.

Pemuatan malas imej ialah teknik untuk mengoptimumkan prestasi halaman web yang melambatkan pemuatan imej pada halaman, memuatkannya hanya apabila imej akan muncul dalam port pandangan pengguna. Ini mengurangkan masa pemuatan halaman dan meningkatkan pengalaman pengguna serta prestasi keseluruhan tapak web. Dalam artikel ini, saya akan memperkenalkan beberapa kaedah pemuatan malas yang biasa digunakan untuk imej.

1. Lazy loading berdasarkan Intersection Observer:

Intersection Observer ialah API yang disediakan oleh penyemak imbas yang boleh memantau sama ada elemen memasuki viewport pengguna. Dengan menggunakan Intersection Observer, kita boleh memantau sama ada elemen imej boleh dilihat dan memuatkannya apabila imej memasuki ruang pandang. Kaedah ini bukan sahaja mudah dan mudah digunakan, tetapi juga mempunyai prestasi yang lebih baik.

Berikut adalah contoh kod yang menggunakan Intersection Observer untuk melaksanakan pemuatan malas imej:

// 创建一个Intersection Observer实例
const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      // 当图片进入视口时加载它
      entry.target.src = entry.target.dataset.src;
      observer.unobserve(entry.target);
    }
  });
});
// 获取所有需要懒加载的图片元素，并添加观察者
const lazyImages = document.querySelectorAll('.lazy');
lazyImages.forEach((lazyImage) => {
  observer.observe(lazyImage);
});

2 Pemuatan malas menggunakan pemantauan acara skrol:

Kaedah ini adalah untuk menentukan sama ada imej memasuki port pandangan dengan mendengar acara skrol. . Semasa pengguna menatal halaman, semak sama ada kedudukan setiap imej berada dalam port pandangan, dan jika ya, muatkan imej.

Berikut ialah kod contoh yang menggunakan mendengar acara tatal untuk melaksanakan pemuatan malas imej:

window.addEventListener('scroll', () => {
  const lazyImages = document.querySelectorAll('.lazy');
  lazyImages.forEach((lazyImage) => {
    if (lazyImage.getBoundingClientRect().top <= window.innerHeight && lazyImage.getBoundingClientRect().bottom >= 0) {
      lazyImage.src = lazyImage.dataset.src;
      lazyImage.classList.remove(&#39;lazy&#39;);
    }
  });
});

3 Memuatkan malas menggunakan setTimeout:

Kaedah ini adalah untuk memuatkan imej dengan menetapkan masa tunda. Apabila halaman dimuatkan, mula-mula muatkan imej pemegang tempat, dan kemudian gunakan setTimeout untuk menangguhkan pemuatan imej sebenar untuk mencapai kesan pemuatan malas.

Berikut ialah kod contoh yang menggunakan setTimeout untuk melaksanakan pemuatan malas imej:

window.addEventListener('load', () => {
  const lazyImages = document.querySelectorAll('.lazy');
  lazyImages.forEach((lazyImage) => {
    lazyImage.src = lazyImage.dataset.placeholder;
    setTimeout(() => {
      lazyImage.src = lazyImage.dataset.src;
      lazyImage.classList.remove('lazy');
    }, 1000); // 设置延迟时间，单位为毫秒
  });
});

Ringkasan:

Pemuatan imej yang malas ialah kaedah yang berkesan untuk mengoptimumkan prestasi halaman web, yang boleh mengurangkan masa memuatkan halaman dan meningkatkan pengalaman pengguna. Artikel ini memperkenalkan beberapa kaedah pemuatan malas yang biasa digunakan untuk imej, termasuk pemuatan malas berdasarkan Pemerhati Persimpangan, pemuatan malas menggunakan pemantauan acara tatal dan pemuatan malas menggunakan setTimeout. Pembangun boleh memilih kaedah yang sesuai dengan mereka berdasarkan keperluan sebenar untuk melaksanakan pemuatan malas imej.

Atas ialah kandungan terperinci Apakah kaedah untuk memuatkan imej yang malas?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!