Bagaimana untuk melaksanakan pemuatan malas

Kaedah untuk melaksanakan pemuatan malas termasuk: 1. API Pemerhati Persimpangan 2. Import Dinamik 3. Pendengar acara tersuai, dsb. Pengenalan terperinci: 1. Intersection Observer API ialah API yang disediakan oleh penyemak imbas, yang boleh digunakan untuk memantau hubungan kedudukan antara elemen dan viewport Apabila elemen memasuki viewport, API akan mencetuskan fungsi panggil balik, di mana pemuatan sumber boleh dilaksanakan. 2. Import Dinamik, dsb.

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

Lazy loading ialah strategi untuk menangguhkan memuatkan sumber tertentu dalam halaman web, seperti imej, video, skrip pihak ketiga, dsb. Melalui pemuatan malas, anda boleh mengurangkan masa pemuatan awal halaman dan meningkatkan kelajuan dan prestasi pemuatan halaman. Berikut ialah beberapa kaedah pemuatan malas yang biasa.

1. Intersection Observer API

Intersection Observer API ialah API yang disediakan oleh penyemak imbas, yang boleh digunakan untuk memantau hubungan kedudukan antara elemen dan viewport. Apabila elemen memasuki ruang pandang, API mencetuskan fungsi panggil balik di mana sumber boleh dimuatkan. Berikut ialah contoh pemuatan malas menggunakan API Pemerhati Persimpangan:

<img data-src="image1.jpg" class="lazy-load" />  
  
<script>  
  const lazyImages = document.querySelectorAll(&#39;.lazy-load&#39;);  
    
  const observer = new IntersectionObserver((entries, observer) => {  
    entries.forEach(entry => {  
      if (entry.isIntersecting) {  
        const img = entry.target;  
        img.src = img.getAttribute(&#39;data-src&#39;);  
        observer.unobserve(img);  
      }  
    });  
  });  
    
  lazyImages.forEach(img => observer.observe(img));  
</script>

Dalam contoh di atas, apabila elemen imej memasuki ruang pandang, atribut data-src digantikan dengan atribut src dan imej mula dimuatkan. Apabila imej dimuatkan, Intersection Observer API berhenti memerhati elemen.

2. Import Dinamik

Import Dinamik ialah kaedah pemuatan modul yang diperkenalkan dalam ES6, yang boleh memuatkan modul secara dinamik pada masa jalan tanpa memuatkannya dalam teg Melalui Import Dinamik, skrip atau modul pihak ketiga boleh dimuatkan atas permintaan. Berikut ialah contoh penggunaan Import Dinamik untuk melaksanakan pemuatan malas:

import('module1.js')  
  .then(module => {  
    // 使用 module  
  })  
  .catch(err => {  
    // 处理加载失败  
  });

Dalam contoh di atas, module1.js akan dimuatkan apabila diperlukan, dan sekali sahaja. Dengan cara ini, isu prestasi halaman yang disebabkan oleh memuatkan sejumlah besar skrip sekaligus boleh dielakkan.

3. Pendengar acara tersuai

Selain menggunakan API yang disediakan oleh penyemak imbas, anda juga boleh melaksanakan pemuatan malas melalui pendengar acara tersuai. Apabila anda perlu memuatkan sumber, anda boleh mencetuskan acara tersuai, dan kemudian melaksanakan operasi memuatkan sumber dalam pendengar acara. Berikut ialah contoh menggunakan pendengar acara tersuai untuk melaksanakan pemuatan malas:

<img data-src="image2.jpg" class="lazy-load" />  
  
<script>  
  const lazyImages = document.querySelectorAll(&#39;.lazy-load&#39;);  
  const lazyImageEvent = new CustomEvent(&#39;lazy-load&#39;);  
    
  lazyImages.forEach(img => {  
    img.addEventListener(&#39;lazy-load&#39;, () => {  
      img.src = img.getAttribute(&#39;data-src&#39;);  
    });  
    img.dispatchEvent(lazyImageEvent); // 触发自定义事件，开始加载图片  
  });  
</script>

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