在实际开发过程中，会遇到需要等待图片加载完成后执行操作，整理一下方案

一：事件监听：

1：通过给元素绑定load事件和error事件，进行监听，成功加载触发load,加载失败触发error

const img = document.createElement('img');
img.src = 'image.jpg';

img.addEventListener('load', () => {
  console.log('Image loaded successfully.');
});

img.addEventListener('error', () => {
  console.log('Error occurred while loading the image.');
});

二：利用promise属性封装

1：将加载图片的过程封装成一个Promise对象，通过Promise的resolve和reject来判断加载是否成功

function loadImage(src) {
  return new Promise((resolve, reject) => {
    const img = new Image();

    img.onload = () => {
      resolve('Image loaded successfully.');
    };

    img.onerror = () => {
      reject(new Error('Error occurred while loading the image.'));
    };

    img.src = src;
  });
}

loadImage('image.jpg')
  .then(message => {
    console.log(message);
  })
  .catch(error => {
    console.error(error);
  });

三：定时器检查

1：每隔一段时间进行一次检查图片complete属性。complete属性为true表示加载完成，为false表示加载未完成

const img = document.createElement('img');
img.src = 'image.jpg';

const checkImageLoaded = setInterval(() => {
  if (img.complete) {
    console.log('Image loaded successfully.');
    clearInterval(checkImageLoaded);
  }
}, 100);