前言
在说到对图片资源进行优化时，那就不得不提到图片预加载和图片懒加载，可能很多朋友都了解这两者，但是一直没有很清晰的概念，以及什么时候用，用在什么场景下，今天就来详细的了解一下吧！
图片预加载
图片预加载是指在页面加载时，提前加载页面中需要使用的图片资源，将它们缓存在浏览器中。
这样当用户需要查看这些图片时，就可以直接从缓存中获取，减少等待时间，提升用户体验。
以下是一个简单的栗子：
function preloadImages(urls, allImagesLoadedCallback) {
const imgs = [];
const loadedCounter = [];
urls.forEach((url, i) => {
imgs[i] = new Image();
// 处理加载计数器
imgs[i].onload = imgs[i].onerror = () => {
if (loadedCounter.length === urls.length) {
allImagesLoadedCallback();
}
};
imgs[i].src = url;
});
}
preloadImages([
'https://example.com/image1.png',
'https://example.com/image2.png',
'https://example.com/image3.png'
], () => {
console.log('All images have been preloaded');
});
通过 JS 创建 Image 对象，设置其 src 属性为要预加载的图片URL，浏览器会自动下载这些图片资源并缓存在本地。
当页面需要展示这些预加载的图片时，浏览器可以直接从本地磁盘缓存中读取图片数据，不需要再次向服务器发起请求下载图片。
从缓存中获取图片数据比从远程服务器下载要快得多，因为:
- 无需再次建立网络连接
- 无需等待服务器响应
- 无需传输数据的延迟
图片懒加载
图片懒加载是一种在页面滚动到图片位置时才加载图片的技术。这样可以减少页面初始加载时的数据量，加快页面加载速度。当用户滚动到图片位置时，再动态加载并显示图片。
使用Intersection Observer API：这是一个原生浏览器API，用于异步观察目标元素与其祖先元素或顶级文档视口的交叉状态。当目标元素进入视口时，可以触发回调函数来加载图片。
参考文档：
以下是一个简单的栗子：
const images = document.querySelectorAll('img[data-src]');
const observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
const src = img.dataset.src;
img.src = src;
img.classList.remove('lazy');
observer.unobserve(img);
}
});
});
images.forEach(image => {
observer.observe(image);
});
我们为所有带有data-src属性的图片元素设置了一个Intersection Observer。当图片进入视口时，我们从data-src属性中获取实际的图片URL，并将其设置为图片的src属性，从而触发图片的加载。
应用场景
图片预加载应用场景:
- 需要快速显示的关键图片： 对于一些需要尽快展示的关键图片，如电商网站的产品主图、新闻门户网站的头版头条图片等，可以使用预加载技术，确保这些图片能够快速显示出来，提升首屏体验。
- 幻灯片、图片画廊等： 在包含幻灯片或图片画廊的页面中，可以预加载相关的一些图片，使得用户切换时，下一张图片已经就绪,可以无延迟显示。
- 游戏等富媒体应用： 游戏或者富媒体应用往往需要加载大量图片资源，可以在加载界面预加载部分关键资源，缩短真正进入应用的等待时间。
- 小型网站或单页面应用： 对于页面数量较少、图片资源有限的小型网站或单页面应用，直接预加载所有图片也是可行的，方便后续无延迟加载。
图片懒加载应用场景:
- 图文内容丰富的页面： 一些包含大量图文内容的页面，如新闻资讯、博客等,初始加载所有图片会拖慢页面速度。此时可使用懒加载,仅加载首屏图片，其他图片滚动到视口时再加载。
- 长列表或图库页面电商：详情、图片社交等页面往往包含大量图片列表，如果全部预加载会影响加载性能。使用懒加载可以只加载当前视口内的图片，提高加载速度。
- 移动端页面： 移动端的网络环境往往不如桌面端稳定，也更加重视首屏加载速度。使用懒加载图片可以减少移动端首屏数据传输量，提升加载体验。
- 无限滚动的页面： 对于无限滚动加载数据的页面，不可能一次性加载所有图片，此时必须采用懒加载策略。
原文链接：https://juejin.cn/post/7346142972202221595 作者：JacksonChen
