JS 動態創建 Image：src 賦值同步，瀏覽器下載渲染異步

結論先行

new Image() 並設置 src 時：

• JS 執行層面同步：img.src = '...' 這行代碼瞬間完成，不阻塞後續代碼。
• 網絡/渲染層面異步：瀏覽器在後台發起 HTTP 請求、下載、解碼、佈局、繪制，不阻塞主線程。

代碼驗證

var img = new Image();
console.log('1. 賦值前');
img.src = 'large.jpg';
console.log('2. 賦值後，立即執行'); // 立即輸出，不等圖片加載
img.onload = () => console.log('3. 圖片加載完成'); // 異步回調
document.body.appendChild(img);

輸出順序：1 → 2 → （網絡延遲後）3。

滾動懶加載場景最佳實踐

// IntersectionObserver API（現代、高性能）
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src; // 觸發異步下載
      observer.unobserve(img);
    }
  });
});
document.querySelectorAll('img[data-src]').forEach(img => observer.observe(img));

關鍵區別