延遲載入 (lazy loading) 外部內容技巧

<!-- 一般圖片元素，加入 loading="lazy" 屬性即可 -->
<img src="https://example.com/path/to/image.webp" alt="示意圖" loading="lazy" width="600" height="400">

<!-- HTML：使用 data-src 儲存圖片真實路徑，src 指向一張輕量佔位圖 -->
<img data-src="https://example.com/path/to/high-res.webp" 
     src="/images/placeholder.webp" 
     alt="延遲載入範例圖片" 
     width="600" 
     height="400" 
     class="lazy-img">

// JavaScript：利用 IntersectionObserver 觀察並延遲載入圖片
document.addEventListener('DOMContentLoaded', function() {
  const lazyImages = document.querySelectorAll('img.lazy-img[data-src]');
  const config = {
    root: null,              // 根元素為視窗
    rootMargin: '0px 0px 100px 0px', // 提前 100px 預載（讓圖片尚未完全進入視窗就開始載入）
    threshold: 0.01          // 交叉比例閾值，只要露出 1% 就觸發
  };

  const imageObserver = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const img = entry.target;
        // 將 data-src 的值設定為真正的圖片 src
        img.src = img.getAttribute('data-src');
        img.removeAttribute('data-src');        // 移除 data-src，避免重複載入
        observer.unobserve(img);                // 取消觀察該圖片
      }
    });
  }, config);

  // 將每個延遲載入圖片元素加入觀察
  lazyImages.forEach(img => {
    imageObserver.observe(img);
  });
});

<video width="640" height="360" controls preload="none" poster="/images/video-placeholder.webp">
  <source src="https://example.com/videos/sample-video.mp4" type="video/mp4">
  您的瀏覽器不支援 HTML5 視訊播放。
</video>

<video id="promoVideo" width="640" height="360" controls preload="none" 
       muted playsinline poster="/images/video-placeholder.webp">
  <!-- 不設置 source，初始不載入影片 -->
  尚未載入影片...
</video>

const videoElem = document.getElementById('promoVideo');
const videoSrc = "https://example.com/videos/promo.mp4";

// 建立 IntersectionObserver 觀察影片元素
const videoObserver = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      // 當影片元素進入視窗，可在此設置影片來源並開始加載
      videoElem.src = videoSrc;
      videoElem.load();  // 開始載入影片資料

      // （可選）若希望自動播放且影片靜音，則取消註解以下兩行
      // videoElem.play();
      // console.log("影片已自動播放");

      observer.unobserve(videoElem); // 停止觀察，避免重複載入
    }
  });
}, { threshold: 0.5 }); // 當影片有一半區域可見時觸發載入

// 啟動觀察
videoObserver.observe(videoElem);

<!-- 延遲載入 YouTube 影片 iframe -->
<iframe src="https://www.youtube.com/embed/VIDEO_ID" 
        width="560" 
        height="315" 
        loading="lazy" 
        frameborder="0" 
        allowfullscreen 
        title="YouTube 影片播放"></iframe>

<!-- 預先放一個空的 iframe 或占位容器 -->
<div id="mapContainer" style="width: 600px; height: 400px; background: #f0f0f0;">
  <p>地圖載入中...</p>
</div>

const mapContainer = document.getElementById('mapContainer');
const mapIframeSrc = "https://www.google.com/maps/embed?pb=..."; // Google 地圖的嵌入網址

const iframeObserver = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      // 建立 iframe 元素並設定屬性
      const iframe = document.createElement('iframe');
      iframe.width = "600";
      iframe.height = "400";
      iframe.src = mapIframeSrc;
      iframe.style.border = "0";
      iframe.allowFullscreen = true;
      iframe.loading = "lazy";  // 即使動態插入，也可設定 lazy 以防萬一
      iframe.referrerPolicy = "no-referrer-when-downgrade";
      iframe.title = "Google 地圖";

      // 將建立好的 iframe 放入容器，替換佔位內容
      mapContainer.innerHTML = "";         // 清空容器內容
      mapContainer.appendChild(iframe);    // 插入真正的地圖 iframe

      observer.unobserve(mapContainer);    // 停止觀察
    }
  });
}, { rootMargin: "0px 0px 200px 0px" }); // 提前 200px 載入，確保平滑

iframeObserver.observe(mapContainer);

<!-- 非關鍵第三方腳本，使用 defer 不阻塞頁面 -->
<script src="https://example.com/some-third-party.js" defer></script>

/**
 * 動態載入指定 URL 的腳本，載入完畢後執行 callback（若提供）
 */
function loadScript(url, callback) {
  const script = document.createElement('script');
  script.src = url;
  script.async = true;  // 使用 async 屬性，非必需但推薦
  script.onload = () => {
    console.log(`${url} 載入完成`);
    if (typeof callback === 'function') {
      callback();
    }
  };
  script.onerror = () => {
    console.error(`${url} 載入失敗！`);
  };
  document.body.appendChild(script);
}

const chatTrigger = document.getElementById('loadChat');
const observer = new IntersectionObserver(entries => {
  if (entries[0].isIntersecting) {
    loadScript('https://example.com/live-chat-widget.js', () => {
      initLiveChat();  // 假設腳本載入後需要呼叫初始化函式
    });
    observer.unobserve(chatTrigger);
  }
});
observer.observe(chatTrigger);

<button id="showComments">顯示評論</button>
<div id="commentSection"></div>

<script>
  document.getElementById('showComments').addEventListener('click', () => {
    loadScript('https://example.com/disqus-embed.js', () => {
      // 假設 disqus-embed.js 載入後會自動生成評論內容到 commentSection
      console.log("評論系統已載入");
    });
  });
</script>