HTML中JS怎么处理图片预加载？Image对象与onload事件

function preloadImage(url, callback) {
  const img = new Image();
  img.src = url;

  if (img.complete) {
    // 如果图片已经加载完成，直接执行回调
    callback.call(img);
  } else {
    img.onload = () => {
      callback.call(img);
    };
    img.onerror = () => {
      console.error("图片加载失败:", url);
      // 可以选择执行失败回调，或者忽略
    };
  }
}

// 示例用法
preloadImage("image1.jpg", function() {
  console.log("image1.jpg 加载完成");
  // 在这里更新页面上的图片显示，或者执行其他操作
});

preloadImage("image2.jpg", function() {
  console.log("image2.jpg 加载完成");
});

function preloadImageWithCache(url, callback) {
  const img = new Image();
  img.src = url;

  img.onload = () => {
    // 将图片转换为 base64 编码
    const canvas = document.createElement('canvas');
    canvas.width = img.width;
    canvas.height = img.height;
    const ctx = canvas.getContext('2d');
    ctx.drawImage(img, 0, 0);
    const dataURL = canvas.toDataURL('image/jpeg'); // 可以选择其他格式

    // 存储到 localStorage
    localStorage.setItem(url, dataURL);

    callback.call(img);
  };

  img.onerror = () => {
    console.error("图片加载失败:", url);
  };
}

// 使用缓存的图片
function displayImage(url, elementId) {
  const cachedData = localStorage.getItem(url);
  if (cachedData) {
    const imgElement = document.getElementById(elementId);
    imgElement.src = cachedData;
  } else {
    // 如果缓存中没有，则正常加载
    const imgElement = document.getElementById(elementId);
    imgElement.src = url;
    preloadImageWithCache(url, () => {
      console.log("图片加载并缓存完成:", url);
    });
  }
}

// 示例
displayImage("image3.jpg", "myImage");

function preloadImageWithFetch(url, callback) {
  fetch(url)
    .then(response => response.blob())
    .then(blob => {
      const imageUrl = URL.createObjectURL(blob);
      const img = new Image();
      img.src = imageUrl;

      img.onload = () => {
        callback.call(img);
        URL.revokeObjectURL(imageUrl); // 释放 URL 对象
      };

      img.onerror = () => {
        console.error("图片加载失败:", url);
        URL.revokeObjectURL(imageUrl); // 释放 URL 对象
      };
    })
    .catch(error => {
      console.error("图片加载失败:", url, error);
    });
}

// 示例
preloadImageWithFetch("image4.jpg", function() {
  console.log("image4.jpg 使用 fetch 加载完成");
});