JavaScript中声明Image()对象变量及Image()对象的作用是什么？

嘿，这个问题问得很到位！在JavaScript里用new Image()创建Image对象，是前端开发中挺常用的一个小技巧，我来给你拆解清楚它的核心作用和实际用途。

一、Image对象本身的核心作用 #

简单来说，Image()是浏览器DOM API提供的原生构造函数，创建出来的对象本质上和HTML里的<img>元素是同一个东西——它就是一个可以在JavaScript层面操作的图片元素，只不过默认情况下它不会被渲染到页面上，而是存在于内存中。你可以把它理解成“脱离DOM树的img标签”，拥有和<img>完全一致的属性（比如src、width、height）和事件（onload、onerror）。

二、声明为Image对象的常见用途 #

1. 预加载图片，提升用户体验 #

这是最经典的用法。如果页面里有一些需要在交互后才显示的图片（比如点击按钮弹出的弹窗背景、滚动到某个区域才出现的图片），提前用Image对象加载它们，就能让浏览器把图片缓存起来。等用户触发交互时，图片已经在本地了，不会出现加载卡顿的情况。示例代码：

// 预加载弹窗背景图
const popupBg = new Image();
popupBg.src = '/assets/popup-bg.jpg';

// 当用户点击按钮时直接使用缓存好的图片
document.getElementById('openPopup').addEventListener('click', () => {
  const popup = document.createElement('div');
  popup.style.backgroundImage = `url(${popupBg.src})`;
  document.body.appendChild(popup);
});

2. 获取图片尺寸，提前规划布局 #

有时候你需要根据图片的宽高来调整页面布局，但又不想先把图片插到DOM里（避免布局抖动），这时候Image对象就派上用场了。只要图片加载完成，你就能直接读取它的width和height属性：

const img = new Image();
img.src = '/product-image.jpg';
img.onload = () => {
  console.log(`图片宽：${img.width}px，高：${img.height}px`);
  // 根据尺寸调整容器大小
  document.getElementById('product-container').style.width = `${img.width}px`;
};

3. 作为Canvas绘图的数据源 #

如果用Canvas做绘图、图片合成这类操作，Image对象是最常用的图片素材来源。你可以先加载图片，然后通过Canvas的drawImage()方法把它画到画布上：

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

const avatar = new Image();
avatar.src = '/user-avatar.png';
avatar.onload = () => {
  // 把头像画到画布的左上角，大小设为100x100
  ctx.drawImage(avatar, 0, 0, 100, 100);
};

4. 监听图片加载状态，做容错处理 #

通过Image对象的onload和onerror事件，你可以精准处理图片的加载情况。比如图片加载失败时，自动替换成占位图，避免页面出现破损的图片图标：

const productImg = new Image();
productImg.src = '/invalid-product-image.jpg';

productImg.onload = () => {
  console.log('图片加载成功');
};

productImg.onerror = () => {
  console.log('图片加载失败，替换为占位图');
  productImg.src = '/placeholder-product.jpg';
  // 之后可以把这个Image对象插入到DOM中
  document.getElementById('product-img-container').appendChild(productImg);
};

内容的提问来源于stack exchange，提问作者Paul