JavaScript与Image加载事件(onload)、加载状态(complete)

JavaScript中，Image加载事件(onload)和加载状态(complete)是用于加载图片并获取图片的加载状态的两种常用方法。下面我们对它们进行详细讲解。

加载事件 (onload)

使用 Image 对象加载图片时，需要使用 onload 事件来检测图片是否被加载。当图片加载完成时，将出发 onload 事件。要使用 onload 事件，需要定义一个 Image 对象，将要加载的图片赋值给该对象的 src 属性，并将该对象的 onload 属性设置为一个函数。该函数将在图片加载完成时被执行。

下面是一个例子：

var img = new Image();
img.onload = function() {
    console.log('图片加载完成');
}
img.src = 'https://example.com/example.png';

在这个例子中，首先创建了一个新的 Image 对象 img，并将要加载的图片的 URL 赋值给该对象的 src 属性。然后将 img 对象的 onload 属性设置为一个函数，该函数将在图片加载完成时被执行。最后，使用 img 对象的 src 属性来开始加载图片。

加载状态 (complete)

除了使用 onload 事件来检测图片是否被加载，我们还可以使用 Image 对象的 complete 属性来获取图片的加载状态。当 complete 属性的值为 true 时，表示图片已经被加载完成。

下面是一个例子：

var img = new Image();
img.src = 'https://example.com/example.png';
if (img.complete) {
    console.log('图片已经加载完成');
} else {
    console.log('图片还未加载完成');
    img.onload = function() {
        console.log('图片加载完成');
    }
}

在这个例子中，首先创建了一个新的 Image 对象 img，并将要加载的图片的 URL 赋值给该对象的 src 属性。然后判断 img 对象的 complete 属性是否为 true。当 complete 为 true 时，表示图片已经被加载完成。如果图片还未加载完成，则将 img 对象的 onload 属性设置为一个函数，该函数将在图片加载完成时被执行。

综上所述，使用 JavaScript 中的 Image 对象的 onload 事件和 complete 属性，可以方便地获取图片的加载状态，并在图片加载完成时执行一些操作。