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
        if(img.length>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"
                    }
                }
            }
        }else{
            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" >
    <img src="img/b.jpg" >
    <img src="img/c.jpg" >
</div>
</body>
<script>
    //判断图片加载完成隐藏loading
    var img = document.getElementsByTagName('img')
    var timer = setInterval(function () {
        var num = 0
        if(img.length>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"
                    }
                }
            }
        }else{
            document.getElementById('modal').style.display = "none"
        }
    }, 10);
</script>
</html>

示例动画

© 版权声明
THE END
喜欢就支持一下吧
点赞907赞赏
分享
评论 抢沙发