H5+JS实现页面加载动画-猿码集

1.前言

随着互联网的不断发展，我们的生活离不开各种各样的网页。然而，有些网页加载速度缓慢，会给用户带来不好的体验。所以，在网页加载的过程中，实现一些页面加载动画，可以加强用户对网页的体验。今天，我们将会学习如何使用H5和JS来实现网页加载动画。

2.实现思路

在实现网页加载动画的过程中，我们需要采取一些较为常见的技术。具体的实现思路如下：

2.1 加载动画的资源准备

加载动画通常使用GIF、SVG等格式。我们可以找到一些自己喜欢的动画素材，制作成对应的格式。GIF动画可以使用img标签来加载，页面加载时会自动播放。如果使用SVG动画，需要使用JavaScript在页面加载时动态添加SVG元素，并操纵其动画效果。

2.2 页面的加载进度

我们需要控制网页的加载进度，以便根据加载进度来判断何时播放加载动画。页面的加载进度可以使用XMLHttpRequest对象或者加载事件来实现。在使用XMLHttpRequest对象获取页面中的资源时，我们可以通过load和progress事件来获取资源的加载情况，根据已经加载的资源数据大小和资源总大小来计算出页面的加载进度。

2.3 页面的渲染

我们需要等待页面中所有资源都加载完成后，才能播放加载动画。在使用JS构建网页时，我们可以使用_window.onload事件来等待资源的加载完成。在H5中也提供了DOMContentLoaded事件，其在页面DOM加载完成后就会触发，不需要等待图片等媒体资源加载完成。

3.实现过程

我们可以使用一些网上已经发布的加载动画，然后在页面LOADING时将其作为背景素材显示。

3.1 HTML代码

<div id="loader">
  <div id="loaderInner">
    <img src="images/loading.gif"/>
  </div>
</div>

我们在HTML中使用了一个div元素用于包含加载动画，id为“loader”。

3.2 CSS代码

#loader {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: #ffffff;
  z-index: 9999;
}
#loaderInner > img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

CSS代码中使用了position:fixed使其始终出现在页面最上层。我们给加载动画设置了背景色为白色，opacity为0。一般情况下，页面加载时使用了透明度动画等效果来淡入。我们使用绝对定位（position:absolute）使其水平和垂直居中。

3.3 JS代码

_window.onload = function() {
  // 确定你的资源路径
  var loader = document.getElementById("loader");
  loader.style.opacity = 0; // 初始值为0，开始该元素是透明的
  (function() {
    var i = 0;
    var intervalId = 0;
    var progress = 0;
    // 判断 document.readyState来计算加载时间
    function doReady(readyState_func) {
      var timer = setTimeout(function () {
        if (document.readyState === "complete") {
          clearTimeout(timer);
          readyState_func();
        } else {
          doReady(readyState_func);
        }
      }, 100);
    }
    doReady(function() {
      intervalId = setInterval(function() {
        progress = Math.max(progress, i / 100);
        i += 5;
        if (i > 100) {
          clearInterval(intervalId);
          loader.style.opacity = 0;
          loader.style.visibility = "hidden";
        }
      }, Math.floor((Math.random() * 150) + 50));
    });
  })();
};

在页面资源已经加载完成后我们可以隐藏加载动画。所以我们在JS代码的最后一行使用_window.onload来等待页面资源加载完成。接着，我们通过判断document.readyState属性来计算资源加载的时间，并设置最大值progress。我们使用了JQuery的animate方法使得加载过程更加流畅。

4.实现效果

在实现过程中，我们可以得到如下实现效果。在运用XMLHttpRequest对象，我们将loading动画至于HTML的body里，在渲染网页的过程中，逐图渐变为为白色背景，最终消失。

4.1 GIF动画

我们使用如下动画作为GIF动画示例：

4.2 SVG动画

我们使用如下动画作为SVG动画示例：

5. 总结

页面的加载动画不仅可以给用户提供一个好的用户体验，对于一些复杂的页面也可以帮助Hey查看页面的加载情况，发现问题。我们通过本篇文章介绍的方案可以快速的实现一款网页加载动画。我们需要掌握其基本的Js、H5、CSS知识，对于JS实现中的动画还需要一定的JQuery知识。

重要提示：为了达到最好的用户体验，加载动画的运动一定不要过分复杂，要控制好运动时间，让能在1s内完成最好.

H5+JS实现页面加载动画