原生js 仿微信网页加载进度条的提示

来源：互联网发布：怎么查看手机的ip端口编辑：程序博客网时间：2024/05/22 12:33

这里写图片描述
一些H5页面在网络加载时，事件会一直监听并触发 readystatechange 事件。某些需要提示网页加载进度，进行进度条提醒的友好提示，类似微信访问微信公众号会出现进度条。一下分享提供大家参考学习。

用原声JS实现的方法，只需要引入js脚本文件到页面头部。

引入progress.js。添加到网页头部。

document.addEventListener('readystatechange',function() {    var state = document.readyState;    if('interactive' == state)  {        var create_progress = document.createElement("div");        create_progress.setAttribute("class","page_progress_mes");        create_progress.setAttribute("style","position: fixed;top:0px;border: 1px rgb(86, 188, 58) solid;width: 0%;opacity: 1;transition-property:width,opacity;transition-delay: 0s;transition-timing-function: linear;transition-duration: 7s");        document.body.appendChild(create_progress);        setTimeout(function() {            document.querySelector('.page_progress_mes').style.width = "90%";        },0);    }else{        document.querySelector('.page_progress_mes').style.transitionDuration = "0.3s";        document.querySelector('.page_progress_mes').style.width = "100%";        setTimeout(function() {document.querySelector('.page_progress_mes').style.transitionDuration = "0.1s";            document.querySelector('.page_progress_mes').style.opacity = '0';        },300);    }});

附件源码地址：http://download.csdn.net/download/china_guanq/10172196

阅读全文

'); })();