当前位置：首页 > 文章列表 > 文章 > 前端 > HTML里JS图片预加载怎么做？Image+onload事件详细教程

HTML里JS图片预加载怎么做？Image+onload事件详细教程

2025-06-22 14:03:13 0浏览收藏

本篇文章主要是结合我之前面试的各种经历和实战开发中遇到的问题解决经验整理的，希望这篇《HTML里JS如何实现图片预加载？搞懂Image+onload事件》对你有很大帮助！欢迎收藏，分享给更多的需要的朋友学习~

图片预加载可通过JavaScript的Image对象、CSS background-image或fetch API实现。1. 使用Image对象，设置src属性并监听onload事件，可判断complete属性避免重复加载；2. 利用background-image将图片URL设为隐藏元素样式，但无法监听加载完成；3. 通过fetch获取图片Blob数据，创建ObjectURL并加载，需注意释放URL对象防止内存泄漏。为避免重复加载，应配合浏览器缓存策略如Cache-Control头部，或使用localStorage存储base64图片（适合小图）。预加载大量图片时，应限制并发请求数、采用懒加载、压缩图片及使用CDN加速以优化性能。

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

图片预加载，本质上就是让图片在真正显示到页面之前，先下载到浏览器缓存里。这样，用户在浏览页面时，就能更快地看到图片，避免长时间的等待，提升用户体验。

解决方案

在HTML中，我们可以利用JavaScript的Image对象和onload事件来处理图片预加载。创建一个Image对象，设置其src属性为图片的URL，浏览器就会开始下载图片。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 加载完成");
});

这段代码的关键在于，先检查图片是否已经加载完成。因为有些图片可能已经存在于浏览器缓存中，直接设置src属性后，complete属性会立即变为true。如果没有这个检查，onload事件可能永远不会触发。

预加载图片后如何避免重复加载？

预加载仅仅是提前下载图片，并不能直接避免重复加载。要避免重复加载，需要配合浏览器缓存策略。如果服务器设置了合适的Cache-Control和Expires头部，浏览器会自动缓存图片，并在下次请求时直接从缓存中读取，而不会再次向服务器发送请求。

如果服务器缓存策略不理想，或者你想更精细地控制缓存，可以考虑使用localStorage或sessionStorage来存储图片的base64编码。不过，这种方法只适合小图片，因为base64编码会增加图片的大小，而且localStorage和sessionStorage的容量有限。

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");

除了Image对象，还有哪些预加载图片的方法？

除了Image对象，还可以使用CSS的background-image属性来预加载图片。将图片的URL设置为一个隐藏元素的background-image，浏览器也会开始下载图片。这种方法的优点是不需要JavaScript代码，但缺点是无法监听图片的加载完成事件。

另外，还可以使用XMLHttpRequest或fetch API来下载图片，然后将图片数据转换为Blob对象，并创建一个ObjectURL来作为图片的URL。这种方法比较复杂，但可以更灵活地控制图片的下载过程。

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 加载完成");
});

需要注意的是，使用URL.createObjectURL创建的URL对象，在使用完毕后需要调用URL.revokeObjectURL来释放，否则可能会导致内存泄漏。

预加载大量图片时，如何优化性能？

预加载大量图片可能会对性能产生影响，特别是当图片体积较大时。为了优化性能，可以考虑以下几点：