js 实现预加载效果
实现预加载效果的 JavaScript 方法
预加载可以提升用户体验，减少等待时间。以下是几种常见的实现方式：
使用 Image 对象预加载图片
通过创建 Image 对象来提前加载图片资源，但不显示在页面上：
const preloadImages = (urls) => {
urls.forEach(url => {
const img = new Image();
img.src = url;
});
};
// 调用示例
preloadImages([
'image1.jpg',
'image2.jpg',
'image3.jpg'
]);使用 link 标签预加载关键资源
在 HTML 头部添加预加载标签，告诉浏览器提前获取重要资源：
<link rel="preload" href="critical.css" as="style">
<link rel="preload" href="main.js" as="script">对应的动态创建方式：
const preloadResource = (url, type) => {
const link = document.createElement('link');
link.rel = 'preload';
link.href = url;
link.as = type;
document.head.appendChild(link);
};使用 Fetch API 预加载数据
通过 Fetch API 提前获取数据，但不立即处理：
const preloadData = (url) => {
fetch(url, {
method: 'GET',
cache: 'force-cache'
});
};预加载视频/音频资源
对于媒体文件，可以先加载元数据：
const preloadVideo = (url) => {
const video = document.createElement('video');
video.preload = 'metadata';
video.src = url;
};显示加载进度
结合进度条提升用户体验：
const showProgress = (loaded, total) => {
const progress = (loaded / total) * 100;
document.getElementById('progress-bar').style.width = `${progress}%`;
};
// 示例使用
const totalResources = 10;
let loadedResources = 0;
// 在每个资源加载完成后调用
const resourceLoaded = () => {
loadedResources++;
showProgress(loadedResources, totalResources);
};注意事项
- 避免过度预加载，只针对关键资源
- 移动端注意流量消耗问题
- 考虑使用 Intersection Observer 实现懒加载与预加载结合
- 对于SPA应用，可以预加载可能访问的路由资源
这些方法可以根据实际需求组合使用，实现最佳性能优化效果。
