常用的网页加载进度条(知识点小结)

1.弹出层水平垂直居中

.loading{
    width: 100%;
    height: 100%;
    position: fixed;
    top:0;
    left: 0;
    z-index: 100;
    background:#fff;
}
.loading .pic{
    width: 64px;
    height: 64px;
    background: url(img/loading.gif);
    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

2.定时器实现进度条
优点:解决大部分加载进度问题
缺点:一旦有了缓存，定时器加载就变得鸡肋了

<script type="text/javascript">
        $(function(){
            var loading='<div class="loading"><div class="pic"></div></div>';
            $("body").append(loading);

            setInterval(function(){
                $(".loading").fadeOut();
            },3000)
        })
</script>

3.加载状态事件制作进度条

• 1.document.onredystatechange 页面加载状态改变时的事件
• 2.document.readyState 返回当前文档的状态
• • 1.uninitialized 还未开始载入
• • 2.loading 载入中
• • 3.interactive 已加载,文档与用户可以开始交互
• • 4.complete 载入完成

<script type="text/javascript">
        document.onreadystatechange=function(){
            if(document.readyState=="complete"){
                $(".loading").fadeOut();
            }
        }
</script>

4.CSS3知识

• 通过改变scaleY大小,控制元素的高度
• 通过设置animation-duration的值控制动画的时长
• 通过设置每个子元素的animation-delay延迟时间实现动画的层次感
• 通过设置animation-iteration-count的值动画无限循环
• 使用box-shadow: 0 3px 0 #666和border-radius: 50%;实现月牙效果
• 通过使用keyframes创建动画

5.定位在头部的进度条

• 通过代码从上到下加载的原理，在不同阶段设置不同的JQuery动画

<header>
   <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="1.jpg">
</header>
<script type="text/javascript">
    $(".loading .pic").animate({width:"33%"},100)
</script>
<div class="content"></div>
<script type="text/javascript">
    $(".loading .pic").animate({width:"66%"},100)
</script>
<footer>
   <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="2.jpg">
</footer>
<script type="text/javascript">
    $(".loading .pic").animate({width:"100%"},100)
</script>

6.实时获取加载数据的进度条

• 通过判断图片资源是否加载完成来实现加载进度条，视频和音频同样的原理

<script type="text/javascript">
    $(function(){
        var img=$("img");
        var num=0;

        img.each(function(i){
            var oImg=new Image();

            oImg.onload=function(){
                //防止图片多次请求onload
                oImg.onload=null;

                num++;

                $(".loading b").html(parseInt(num/$("img").size()*100)+"%");
                if(num>=i){
                    $(".loading").fadeOut();
                }
            }
            oImg.src=img[i].src;
        });

    })
</script>

知识点总结分享，温故知新