HTML里这样搞图片预加载，JS结合Image对象超简单！

想要提升网页加载速度，优化用户体验？本文聚焦HTML中利用JavaScript进行图片预加载的关键技术。我们将深入探讨如何巧妙运用Image对象搭配onload事件，确保图片在真正显示前已加载至浏览器缓存。文章详细讲解了Image对象、CSS background-image以及fetch API三种预加载方案，并着重分析了如何结合浏览器缓存策略，如Cache-Control头部或localStorage，有效避免重复加载。此外，针对大量图片预加载可能带来的性能问题，我们还提供了限制并发请求、懒加载、图片压缩以及CDN加速等优化策略。掌握这些技巧，让你的网页图片加载飞起来！

图片预加载可通过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中，我们可以利用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来释放，否则可能会导致内存泄漏。

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

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

1. 限制并发请求数量：同时预加载的图片数量不宜过多，可以设置一个并发请求数量的上限，避免一次性发送大量请求，导致浏览器阻塞。
2. 使用懒加载：只预加载视口附近的图片，当用户滚动到其他区域时，再加载相应的图片。
3. 图片压缩：使用合适的图片格式和压缩算法，减小图片体积。
4. CDN加速：将图片资源部署到CDN上，利用CDN的缓存和加速功能，提高图片加载速度。

总的来说，图片预加载是一个提升用户体验的有效手段，但需要根据实际情况选择合适的方法，并注意优化性能，避免产生负面影响。

到这里，我们也就讲完了《HTML里这样搞图片预加载，JS结合Image对象超简单！》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于浏览器缓存,性能优化,图片预加载,Image对象,onload事件的知识点！