javascript实现一个网页加载进度loading

下面是关于Javascript实现一个网页加载进度loading的完整攻略。

步骤一：添加HTML结构

首先，在网页的HTML结构中添加loading元素，用于显示进度条和加载状态。可以采用下面代码模板：

<div id="loading">
  <div id="progress"></div>
  <div id="message">Loading...</div>
</div>

其中，id为progress的div元素将被用来表示进度条，id为message的div元素将用来展示loading状态。

步骤二：添加CSS样式

为了让loading元素在屏幕中央展示，需要在CSS样式中定义loading元素的位置和样式。可以采用下面代码模板：

#loading {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

#progress {
  width: 0%;
  background-color: #007bff;
  height: 5px;
  transition: width 0.3s ease-in-out;
}

#message {
  margin-top: 10px;
  font-size: 14px;
  color: #007bff;
}

其中，#loading样式用来设置loading元素的位置和排列方式，#progress样式用来设置进度条的颜色和过渡效果，#message样式用来设置loading状态的字体大小和颜色。

步骤三：添加Javascript代码

在页面加载时，通过Javascript代码计算已加载的资源量与总资源量之比来更新已完成的进度。可以采用下面的代码实现：

document.onreadystatechange = function () {
  if (document.readyState === "complete") {
    setTimeout(function () {
      document.getElementById("loading").style.opacity = "0";
    }, 1000);
  }
};

var count = 0;
var total = document.getElementsByTagName("html")[0].getElementsByTagName("*").length;

function showProgress() {
  count++;
  var percent = Math.ceil((count / total) * 100);
  document.getElementById("progress").style.width = percent + "%";

  if (count === total) {
    setTimeout(function () {
      document.getElementById("loading").style.opacity = "0";
    }, 1000);
  }
}

var images = document.getElementsByTagName("img");
for (var i = 0; i < images.length; i++) {
  images[i].addEventListener("load", showProgress, false);
}

其中，document.onreadystatechange事件监听页面加载状态，当页面完成加载后，通过setTimeout()函数将loading元素的透明度设置为0，从而实现隐藏loading元素的效果。

count变量表示已加载资源的数量，total变量表示所有资源的总数。showProgress函数在每次资源加载完成后被调用，计算已加载的资源量与总资源量之比，并更新进度条的显示。

代码中最后一段实现对所有图片资源的监听，当其中的一张图片加载完成后就会调用showProgress()函数来更新进度条。同样需要注意的是，在使用图片时，需要等图片完全加载后才能正确计算进度条宽度。

示例说明

示例一：应用于SPA单页应用

可以通过如下示例演示：

// 1. 在router.beforeEach函数中启用loading
router.beforeEach((to, from, next) => {
  document.getElementById("loading").style.opacity = "1";
  next();
});

// 2. 在router.afterEach函数中禁用loading
router.afterEach((to, from) => {
  document.getElementById("loading").style.opacity = "0";
});

在单页应用中，为了提高用户体验，通常在路由切换时启用loading元素，显示进度条和加载状态，当路由切换完成时，禁用loading元素。

示例二：应用于图片预加载

可以通过如下示例演示：

var images = [
  "https://www.example.com/image1.jpg",
  "https://www.example.com/image2.jpg",
  "https://www.example.com/image3.jpg",
];

var count = 0;
var total = images.length;

function preloadImages() {
  for (var i = 0; i < images.length; i++) {
    var img = new Image();
    img.onload = showProgress;
    img.src = images[i];
  }
}

function showProgress() {
  count++;
  var percent = Math.ceil((count / total) * 100);
  document.getElementById("progress").style.width = percent + "%";

  if (count === total) {
    setTimeout(function () {
      document.getElementById("loading").style.opacity = "0";
    }, 1000);
  }
}

preloadImages();

在预加载图片时，可以通过如上代码计算已加载的图片数量与总图片数量之比，并更新进度条的宽度。当所有图片加载完成时，隐藏loading元素。