图片预加载可通过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来释放，否则可能会导致内存泄漏。
预加载大量图片时，如何优化性能？
预加载大量图片可能会对性能产生影响，特别是当图片体积较大时。为了优化性能，可以考虑以下几点：
- 限制并发请求数量：同时预加载的图片数量不宜过多，可以设置一个并发请求数量的上限，避免一次性发送大量请求，导致浏览器阻塞。
- 使用懒加载：只预加载视口附近的图片，当用户滚动到其他区域时，再加载相应的图片。
- 图片压缩：使用合适的图片格式和压缩算法，减小图片体积。
- CDN加速：将图片资源部署到CDN上，利用CDN的缓存和加速功能，提高图片加载速度。
总的来说，图片预加载是一个提升用户体验的有效手段，但需要根据实际情况选择合适的方法，并注意优化性能，避免产生负面影响。
