zoukankan      html  css  js  c++  java
  • 网页加载进度

     
    1.常见错误的实现方案
      采用定时器在固定秒数清除遮盖进度层来实现相似的伪效果,并未按照真实的加载进度来进行加载。只能在表现上达到进度条
    2.正常进度条
      2.1 加载状态事件
    document.onreadystatechage 頁面加载状态改变时间
    document.readyState 返回当前文档状态
    uninitialized - 还未开始载入
    loading - 载入中
    interactive - 已加载,文档与用户可以开始交互
    complete - 载入完成
     
      示例代码:
    //监听页面改变事件
    document.onreadystatechange=function(){
    // 打印测试
    console.log(document.readyState);
    // 加载完成事件
    if(document.readyState === 'complete'){
    //加载完成后隐藏loading层
    $('#loading').hide();
    }
    }
    2.2 利用html从上到下加载
      在html 中间的几个位置设置加载的百分比的js代码块
      这种方式只是可已获取到页面加载完全部数据,但并没有渲染完成
    示例代码
    <!-- 在load 层后面添加-->
    <script>
    $("#loading .pic").animate({10%},100)
    </script>
    <!--中间关键位置添加进度控制-利用html的加载是顺序执行的达到-按进度显示-->
    <!--body 最后添加-->
    <script>
    $("#loading .pic").animate({100%},100).hide();
    </script>
    2.3 利用img对象来实时获取进度【仅仅只针对图像处理,所以不一定准确,如果包含视频和音频则要对应处理】
    var img =$('img');
    var num=0;
     
    img.each(function(){
    var oImg=new Image();
    //图片加载完成事件
    oImg.onload=function(){
    //防止gif重复请求
    oImg.onload=null;
     
    num++;
    //设置进度
    $('.loading .picText').text(parseInt(num/$('img').size()*100)+'%')
    if(num===i){
    $('.loading').fadeOut()
    }
    }
    //图片src赋值应该放在onload之后防止ie出现缓存错误
    oImg.src=img[i].src;
    })
  • 相关阅读:
    ApplicationContext.xml修改
    springmvc.xml约束
    log4j.properties
    SqlMapConfig.xml配置文件
    Mybatis注解式开发坐标
    字符串函数
    vim基础快捷键
    format的使用
    lambda匿名函数
    字典的基础使用
  • 原文地址:https://www.cnblogs.com/QQ-Monarch/p/7889963.html
Copyright © 2011-2022 走看看