JS检查图片加载完成的三种方法

创作时间:

作者:

@小白创作中心

JS检查图片加载完成的三种方法

引用

来源

https://docs.pingcode.com/baike/3628780

在JavaScript中检查图片是否已经加载完成，可以使用以下方法：监听图片的load事件、检查complete属性、使用Promise。其中，监听图片的load事件是最常见和可靠的方法，因为它可以确保图片在加载完成时执行指定的代码。

一、监听图片的load事件

监听图片的load事件是最常用的方法之一。通过为图片元素添加事件监听器，可以在图片加载完成时执行特定的代码。

const img = new Image();
img.src = 'path/to/your/image.jpg';
img.onload = function() {
    console.log('Image has loaded');
    // 这里可以执行图片加载完成后的操作
};

详细描述：当图片的src属性被设置后，浏览器会开始加载图片。通过监听img元素的load事件，当图片加载完成时，指定的回调函数将被执行。这种方法不仅适用于新创建的Image对象，还适用于已经存在于DOM中的img元素。

二、检查complete属性

complete属性是一个布尔值，它指示图片是否已经加载完成。这种方法适用于已经存在于DOM中的img元素。

const img = document.getElementById('yourImageId');
if (img.complete) {
    console.log('Image has already loaded');
    // 这里可以执行图片加载完成后的操作
} else {
    img.onload = function() {
        console.log('Image has loaded');
        // 这里可以执行图片加载完成后的操作
    };
}

详细描述：通过检查img元素的complete属性，可以立即知道图片是否已经加载完成。如果complete为true，表示图片已经加载完成，否则可以继续监听load事件以捕获加载完成的时刻。

三、使用Promise

使用Promise可以将图片加载的过程封装成一个异步操作，从而更方便地进行处理。

function loadImage(src) {
    return new Promise((resolve, reject) => {
        const img = new Image();
        img.src = src;
        img.onload = () => resolve(img);
        img.onerror = (err) => reject(err);
    });
}
loadImage('path/to/your/image.jpg')
    .then((img) => {
        console.log('Image has loaded');
        // 这里可以执行图片加载完成后的操作
    })
    .catch((err) => {
        console.error('Image failed to load', err);
    });

详细描述：通过创建一个Promise对象，可以将图片加载的过程异步化。当图片加载成功时，Promise会调用resolve函数；如果加载失败，则调用reject函数。这种方法特别适合在现代JavaScript应用中使用，因为它可以与async/await语法结合使用，从而使代码更加简洁和易读。

四、结合使用多个方法

有时候，为了确保图片加载状态的准确性，可以结合使用上述多种方法。例如，先检查complete属性，如果图片尚未加载完成，再监听load事件。

const img = document.getElementById('yourImageId');
if (img.complete) {
    console.log('Image has already loaded');
    // 这里可以执行图片加载完成后的操作
} else {
    img.onload = function() {
        console.log('Image has loaded');
        // 这里可以执行图片加载完成后的操作
    };
    img.onerror = function() {
        console.error('Image failed to load');
    };
}

详细描述：这种方法结合了complete属性和load事件监听，确保无论图片是否已经加载完成，都可以正确地执行相应的操作。同时，还添加了onerror事件监听器，以处理图片加载失败的情况。