当前位置：首页 > JavaScript

js 实现预加载效果

2026-03-01 07:17:30JavaScript

实现预加载效果的 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;
};

显示加载进度

结合进度条提升用户体验：

js 实现预加载效果

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