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

var image = new Image();
image.src = 'image.jpg';

image.onload = function() {
  console.log('图像已成功加载');
};

image.onerror = function() {
  console.log('图像加载失败');
};

var element = document.createElement('div');
element.style.backgroundImage = 'url(image.jpg)';
element.style.display = 'none';
document.body.appendChild(element);

var backgroundImage = getComputedStyle(element).backgroundImage;
var imageUrl = backgroundImage.slice(4, -1).replace(/["']/g, "");

var image = new Image();
image.src = imageUrl;

image.onload = function() {
  console.log('图像已成功加载');
};

image.onerror = function() {
  console.log('图像加载失败');
};

var xhr = new XMLHttpRequest();
xhr.open('HEAD', 'image.jpg', true);

xhr.onload = function() {
  if (xhr.status === 200) {
    console.log('图像已成功加载');
  } else {
    console.log('图像加载失败');
  }
};

xhr.onerror = function() {
  console.log('图像加载失败');
};

xhr.send();