JS Image 对象的属性详解|极客笔记

JS Image 对象的属性详解

在网页开发中，Image 对象经常用于处理图片相关的操作。在 JavaScript 中，通过 new Image() 可以创建一个新的图片对象。在这篇文章中，我们将详细介绍 Image 对象的常用属性及其用法。

1. `Image` 对象的属性

1.1 `src`

src 属性用于获取或设置图片的 URL 地址。当创建一个新的 Image 对象时，可以通过设置 src 属性来加载图片。示例代码如下：

var img = new Image();
img.src = 'https://example.com/image.jpg';

1.2 `width` 和 `height`

width 和 height 属性分别用于获取图片的宽度和高度。这两个属性通常在图片加载完成后才能获取到正确的值。示例代码如下：

var img = new Image();
img.src = 'https://example.com/image.jpg';

img.onload = function() {
  console.log(img.width);
  console.log(img.height);
};

1.3 `alt`

alt 属性用于设置图片加载失败时显示的替代文本。这对于网页无法加载图片时提供友好的提示非常有用。示例代码如下：

var img = new Image();
img.src = 'https://example.com/image.jpg';
img.alt = 'Image not found';

1.4 `complete`

complete 属性用于判断图片是否已经加载完成。当图片加载完成后，complete 的值为 true，否则为 false。示例代码如下：

var img = new Image();
img.src = 'https://example.com/image.jpg';

if (img.complete) {
  console.log('Image has been loaded');
} else {
  console.log('Image is still loading');
}

1.5 `naturalWidth` 和 `naturalHeight`

naturalWidth 和 naturalHeight 属性分别用于获取图片的原始宽度和高度。这两个属性可以用于获取图片的实际大小，而不受 CSS 样式的影响。示例代码如下：

var img = new Image();
img.src = 'https://example.com/image.jpg';

img.onload = function() {
  console.log(img.naturalWidth);
  console.log(img.naturalHeight);
};

2. 属性的使用示例

下面我们通过一个完整的示例来演示如何使用 Image 对象的属性，实现图片的预加载和显示：

// 创建一个新的 Image 对象
var img = new Image();

// 设置图片的 URL 地址
img.src = 'https://example.com/image.jpg';

// 当图片加载完成后执行以下操作
img.onload = function() {
  // 将图片添加到页面中
  document.body.appendChild(img);

  // 获取并输出图片的宽度和高度
  console.log('Image width:', img.width);
  console.log('Image height:', img.height);
};