jQuery学习笔记

基于jQuery实现加载进度条

2019-01-25  本文已影响0人  小人物的秘密花园

学习资料

慕课网--常用的网页加载进度条
在线进度条生成GIF
在线进度条动画
CSS3前缀兼容

概述

最近在慕课网上学习网页加载进度条课程, 将课程所学知识整理在本文中，便于以后查看；

课程主要内容

  • 通过加载状态事件制作进度条;
  • 定位在头部的进度条;
  • 实时获取加载数据的进度条;

网页加载进度条误区

网上很多关于实现加载进度条的资料，都采用定时器的方式实现，但是这种方式并不是真正的进度条，只是将网页的内容延迟呈现给用户而已；

加载进度条的实现

定时器+GIF图片实现

使用JavaScript的setTimeout或者setInterval，来延迟一段时间加载网页内容；

进度条布局

<div class="loading">
  <div class="lodaing-ele"></div>
</div>

编写样式

要点：

.loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    background-color: #fff;
}

.loading .loading-ele {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: 0 auto;
    width: 64px;
    height: 64px;
    background: url("../img/126.gif") 0 0;
}

编写脚本

1秒后隐藏加载进度条；

setInterval(function() {
  $('.loading').hide();
},1000);

结果展示

定时器实现加载进度条.GIF

缺点

只能根据一个固定的时间来加载内容，不切合实际;

通过监听加载状态事件+CSS3进度条小动画实现

通过监听文档状态改变事件的阶段来实现是否显示加载进度条；

知识点

document.readyState的状态

  1. uninitialized -- 还未开始载入；
  2. loading -- 载入中；
  3. interactive -- 已载入，文档与用户可以开始交互；
  4. complete -- 载入完成；

document.onreadystatechange，返回状态是complete是表示所有的内容都加载成功了，此时隐藏加载进度条，显示页面内容；

加载进度条布局

<div class="loading" id="loading">
        <div class="loading-ele">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>

编写样式

要点：

.loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(0, 0, 0);
    z-index: 1000;
}

.loading-ele {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate3d(-50%, -50%, 0);
    -ms-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
    width: 50px;
    height: 50px;
}

.loading-ele span {
    display: block;
    float: left;
    margin: 0 2px;
    width: 6px;
    height: 50px;
    background: #00a0e6;
    -webkit-transform: scaleY(0.4);
    -ms-transform: scaleY(0.4);
    transform: scaleY(0.4);
    -webkit-animation: loading 1.2s infinite;
    animation: loading 1.2s infinite;
}

.loading-ele span:nth-child(2) {
    -webkit-animation-delay: 0.1s;
    animation-delay: 0.1s;
}

.loading-ele span:nth-child(3) {
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
}

.loading-ele span:nth-child(4) {
    -webkit-animation-delay: 0.3s;
    animation-delay: 0.3s;
}

.loading-ele span:nth-child(5) {
    -webkit-animation-delay: 0.4s;
    animation-delay: 0.4s;
}

@-webkit-keyframes loading {
    0%,
    40%,
    100% {
        -webkit-transform: scaleY(0.4);
        transform: scaleY(0.4);
    }
    20% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
    }
}

@keyframes loading {
    0%,
    40%,
    100% {
        -webkit-transform: scaleY(0.4);
        transform: scaleY(0.4);
    }
    20% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
    }
}

结果展示

监听加载事件结合CSS3进度条动画.GIF

定位在头部的进度条

将进度条放在页面顶部显示；
每加载完成页面中的一块区域，则进度条增大一部分的百分比，这样加载的原理是根据浏览器渲染页面内容是按照从上到下的方式加载；

案例布局

 <div class="loading">
        <div class="loading-ele"></div>
    </div>
    <header>
        <img src="http://img0.imgtn.bdimg.com/it/u=3213383801,616553731&fm=27&gp=0.jpg" alt="">
        <img src="http://img0.imgtn.bdimg.com/it/u=2084835106,1689055670&fm=27&gp=0.jpg" alt="">
    </header>
    <script>
        $('.loading .loading-ele').animate({
            width: '10%'
        }, 100);
    </script>
    <section class="banner">
        <img src="http://img3.imgtn.bdimg.com/it/u=968106239,1064893792&fm=27&gp=0.jpg" alt="">
        <img src="http://img2.imgtn.bdimg.com/it/u=2150060954,4184285242&fm=200&gp=0.jpg" alt="">
    </section>
    <script>
        $('.loading .loading-ele').animate({
            width: '30%'
        }, 100);
    </script>
    <section class="about">
        <img src="http://img3.imgtn.bdimg.com/it/u=2703079217,2981293394&fm=27&gp=0.jpg" alt="">
        <img src="http://img0.imgtn.bdimg.com/it/u=2564134372,329020640&fm=27&gp=0.jpg" alt="">
    </section>
    <script>
        $('.loading .loading-ele').animate({
            width: '50%'
        }, 100);
    </script>
    <section class="prop">
        <img src="http://img1.imgtn.bdimg.com/it/u=386988813,1559784928&fm=200&gp=0.jpg" alt="">
        <img src="http://img3.imgtn.bdimg.com/it/u=3827763211,2878435086&fm=27&gp=0.jpg" alt="">
    </section>
    <script>
        $('.loading .loading-ele').animate({
            width: '70%'
        }, 100);
    </script>
    <section class="news">
        <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2127463563,1209028471&fm=200&gp=0.jpg" alt="图片加载失败...">
        <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2795898335,2158698298&fm=200&gp=0.jpg" alt="图片加载失败...">
    </section>
    <script>
        $('.loading .loading-ele').animate({
            width: '90%'
        }, 100);
    </script>
    <footer>
        <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2127463563,1209028471&fm=200&gp=0.jpg" alt="图片加载失败...">
        <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2795898335,2158698298&fm=200&gp=0.jpg" alt="图片加载失败...">
    </footer>
    <script>
        $('.loading .loading-ele').animate({
            width: '100%'
        }, 100, function() {
            $('.loading').fadeOut();
        });
    </script>

编写样式

* {
    padding: 0;
    margin: 0;
}

.loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    background: #fff;
}

.loading .loading-ele {
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 10px;
    background: firebrick;
}

结果展示

在头部加载进度条.GIF
上一篇下一篇

猜你喜欢

热点阅读