實作懶載入的方法有：1、Intersection Observer API；2、Dynamic Import；3、自訂事件監聽器等。詳細介紹：1、Intersection Observer API 是一種瀏覽器提供的API，可以用來監控元素與視窗的位置關係，當元素進入視口時，API 會觸發一個回呼函數，可以在其中執行載入資源的操作；2、Dynamic Import等等。
本教學作業系統：windows10系統、DELL G3電腦。
懶載入是一種延遲載入網頁中某些資源的策略，例如圖片、影片、第三方腳本等。透過懶加載，可以減少頁面初始載入時間，提高頁面載入速度和效能。以下介紹幾種常見的懶加載方法。
1、Intersection Observer API
Intersection Observer API 是一種瀏覽器提供的 API，可以用來監控元素與視窗（viewport）的位置關係。當元素進入視窗時，API 會觸發一個回呼函數，可以在其中執行載入資源的操作。以下是使用 Intersection Observer API 實作懶載入的範例：
<img data-src="image1.jpg" class="lazy-load" />
<script>
const lazyImages = document.querySelectorAll('.lazy-load');
const observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.getAttribute('data-src');
observer.unobserve(img);
}
});
});
lazyImages.forEach(img => observer.observe(img));
</script>在上面的範例中，當圖片元素進入視窗時，data-src 屬性被替換為 src 屬性，並開始載入圖片。當圖片載入完成後，Intersection Observer API 停止觀察該元素。
2、Dynamic Import
Dynamic Import 是 ES6 引入的模組載入方式，可以在執行時間動態地載入模組，而不需要在
