原生JS实现首页进度加载动画

2023年6月10日下午11:07 • JavaScript

以下是“原生JS实现首页进度加载动画”的完整攻略：

1. 概述

网站在加载页面时，有时需要等待较长的时间。在这段等待时间内，为了避免用户感到无聊或不耐烦，我们可以添加一个进度加载动画。本文将演示如何使用原生JS实现这样一个进度加载动画。

2. 实现步骤

2.1 准备工作

在HTML文件中添加一个进度条元素，例如：

<div class="progress-bar" id="progress"></div>

使用CSS样式来为进度条定义一个起始状态：

#progress {
  width: 0%;
  height: 3px;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #29d;
  z-index: 99;
  transition: width 0.2s ease-out;
}

这段CSS样式的含义是：将进度条设置为横向的、高3像素的一条蓝色线，初始宽度为0，固定在页面的顶部。同时，为进度条添加了一个过渡效果，使其在宽度变化时有一个缓慢的动画效果。

2.2 编写JS代码

使用以下JS代码实现进度加载动画：

var progressBar = document.getElementById('progress');
var percent = 0;
var intervalId = setInterval(function() {
  percent += 1;
  progressBar.style.width = percent + '%';
  if (percent >= 100) {
    clearInterval(intervalId);
  }
}, 10);

这段JS代码的含义是：首先获取到进度条元素，然后定义一个变量percent表示进度条的百分比，初始值为0。接着使用setInterval函数定时执行一个匿名函数，每次执行时增加percent的值1，然后将进度条的宽度设为percent的值加上百分号。最后，当percent达到100时，使用clearInterval函数停止定时器。

至此，当页面加载时，进度条会随着页面的下载进度而不断变化，直至完成，完成后进度条会停止在100%的位置。

2.3 定制进度条样式

可以根据自己的需要，对进度条样式进行调整，例如添加圆角和阴影效果，代码如下：

#progress {
  width: 0%;
  height: 8px;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #29d;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  z-index: 99;
  transition: width 0.2s ease-out;
  border-radius: 5px;
}

3. 示例说明

示例一

在页面中嵌入大量图片时，可以使用进度条来显示图片加载的进度。例如，下面的代码中，我们在页面中添加了3个大图，使用上述方法实现了一个进度条：

<div class="progress-bar" id="progress"></div>

<img src="大图1.png" />
<img src="大图2.png" />
<img src="大图3.png" />

<script>
var progressBar = document.getElementById('progress');
var percent = 0;
var intervalId = setInterval(function() {
  percent += 1;
  progressBar.style.width = percent + '%';
  if (percent >= 100) {
    clearInterval(intervalId);
  }
}, 10);
</script>

在页面加载时，进度条会随着图片的下载进度而不断变化，直至完成。

示例二

在异步加载数据时，我们也可以使用进度条来显示数据加载的进度。例如，下面的代码中，我们使用ajax异步加载了一个大型的JSON文件，并在加载时显示进度条：

<div class="progress-bar" id="progress"></div>

<script>
var progressBar = document.getElementById('progress');
var percent = 0;
var xhr = new XMLHttpRequest();
xhr.open('GET', 'large_data.json');
xhr.onreadystatechange = function() {
  if (this.readyState === 4 && this.status === 200) {
    clearInterval(intervalId);
    var data = JSON.parse(this.responseText);
    // TODO: 进行数据处理
  }
};
var intervalId = setInterval(function() {
  percent += 1;
  progressBar.style.width = percent + '%';
  if (percent >= 100) {
    clearInterval(intervalId);
  }
}, 10);
xhr.send();
</script>

在异步加载数据时，进度条会随着数据下载进度而不断变化，直至完成。