js页面loading动画的简单实现

loading动画结构

<div class="modal" id="modal">
    <div class="loader">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
</div>

样式

@keyframes load {
  0% {
    background: rgba(229, 185, 96, .4);
    margin-top: 25%;
    height: 10%;
  }

  50% {
    background: rgba(229, 185, 96, .8);
    height: 100%;
    margin-top: 0;
  }

  100% {
    background: rgba(229, 185, 96, .4);
    height: 10%;
    margin-top: 25%;
  }
}
.modal {
  position: fixed;
  width: 100%;
  text-align: center;
  left: 0;
  top: 0;
  height: 100%;
  display: flex;
  align-items: center;
  z-index: 998;
  background: #000;
  justify-content: center;
}
.loader {
  width: 180px;
  height: 100px;
  span {
    display: block;
    background: rgba(229, 185, 96, .8);
    width: 7px;
    height: 10%;
    border-radius: 14px;
    margin-right: 5px;
    float: left;
    margin-top: 25%;
    &:nth-child(1) {
      animation: load 2.5s 1.4s infinite linear
    }
    &:nth-child(2) {
      animation: load 2.5s 1.2s infinite linear
    }
    &:nth-child(3) {
      animation: load 2.5s 1.0s infinite linear
    }
    &:nth-child(4) {
      animation: load 2.5s 0.8s infinite linear
    }
    &:nth-child(5) {
      animation: load 2.5s 0.6s infinite linear
    }
    &:nth-child(6) {
      animation: load 2.5s 0.4s infinite linear
    }
    &:nth-child(7) {
      animation: load 2.5s 0.2s infinite linear
    }
    &:nth-child(8) {
      animation: load 2.5s 0s infinite linear
    }
    &:nth-child(9) {
      animation: load 2.5s 0.2s infinite linear
    }
    &:nth-child(10) {
      animation: load 2.5s 0.4s infinite linear
    }
    &:nth-child(11) {
      animation: load 2.5s 0.6s infinite linear
    }
    &:nth-child(12) {
      animation: load 2.5s 0.8s infinite linear
    }
    &:nth-child(13) {
      animation: load 2.5s 1s infinite linear
    }
    &:nth-child(14) {
      animation: load 2.5s 1.2s infinite linear
    }
    &:nth-child(15) {
      animation: load 2.5s 1.4s infinite linear
    }
  }
}

判断所有图片加载完成

页面中图片的加载往往是最耗时间的，通过判断所有图片是否加载完成来隐藏loading动画，图片的complete 属性可返回浏览器是否已完成对图像的加载，如果加载完成，则返回 true，否则返回 fasle，循环判断所有图片complete对象是否为True来隐藏loading动画。

//判断图片加载完成隐藏loading
    var img = document.getElementsByTagName('img')
    var timer = setInterval(function () {
        var num = 0
        for (var i = 0; i < img.length; i++) {
            if (img[i].complete) {
                num = i + 1;
                if (num == img.length) {
                    clearInterval(timer);
                    document.getElementById('modal').style.display = "none"
                }
            }
        }
    }, 10);

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js网页Loading效果</title>
</head>
<body>
<div class="modal" id="modal">
    <div class="loader">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
</div>
<div>
    <h1>页面内容</h1>
    <img src="img/a.jpg" alt="">
    <img src="img/b.jpg" alt="">
    <img src="img/c.jpg" alt="">
</div>
</body>
<script>
    //判断图片加载完成隐藏loading
    var img = document.getElementsByTagName('img')
    var timer = setInterval(function () {
        var num = 0
        for (var i = 0; i < img.length; i++) {
            if (img[i].complete) {
                num = i + 1;
                if (num == img.length) {
                    clearInterval(timer);
                    document.getElementById('modal').style.display = "none"
                }
            }
        }
    }, 10);
</script>
</html>

示例动画

loading动画

«
»