如何检查图像是否已加载？

在网页开发中，有时我们需要检查图像是否已加载，以便进行相关的操作。以下是几种检查方法：

1. 使用onload事件

可以使用onload事件监听图像是否已加载完成。当图像加载完成后，onload事件将被触发。

var imgElement = document.getElementById('img');
imgElement.onload = function() {
    console.log('Image loaded.');
};

在这个例子中，我们使用getElementById方法获取图像元素，并为其添加onload事件监听器。当图像加载完成后，事件处理函数将被触发。在事件处理函数中，我们可以进行相关的操作，比如显示图像等。

2. 使用complete属性

另一种检查图像是否已加载的方法是使用complete属性。这个属性返回一个布尔值，表示图像是否已加载完成。

var imgElement = document.getElementById('img');
if (imgElement.complete) {
    console.log('Image loaded.');
} else {
    console.log('Image not loaded yet.');
}

在这个例子中，我们使用getElementById方法获取图像元素，并检查其complete属性，如果为true，则表示图像已加载完成，否则表示仍在加载中。

3. 使用Image对象

还可以使用Image对象来加载图像，并检查其状态。Image对象有一个onload事件和一个onerror事件，分别用于监听图像的加载成功和失败。

var img = new Image();
img.onload = function() {
    console.log('Image loaded.');
};
img.onerror = function() {
    console.log('Failed to load image.');
};
img.src = 'https://example.com/image.jpg';

在这个例子中，我们创建一个新的Image对象，并为其添加onload和onerror监听器。当图像加载成功时，onload事件将被触发；当图像加载失败时，onerror事件将被触发。我们还需要使用src属性来指定要加载的图像的URL。

以上是几种检查图像是否已加载的方法，可以根据自己的需要选择适合的方法。在实际开发中，还可以结合其他技术，比如使用AJAX来加载图像，或者使用第三方库来简化操作。