js之进度条

js之进度条

今天试学了一下进度条,感觉挺神奇的,其中收藏了几个网址,我贡献一下:
https://loading.io/ http://www.iconfont.cn/

我讲一下其中的原理
首先,实现起来有两种方式:
第一:使用定时器的方式,也就是setTimeout,来制作进度条,但是,这是假的进度条,只是设置在规定的时间执行这个进度条
第二:实际的网页加载来显示实时的效果。
首先,我们给其设置一个容器,设置其为固定位置fixed,宽高各100%,再将制定的进度条进行div包裹,设置其style,用来专门包裹进度条,当进度条在执行时,服务器加载的情况不予显示,只有在服务器将网页上的内容全部加载完成之后才可以显示。
这就要用到我们的document.onreadystatechange 来监听状态改变,
使用document.readyState == 'complete', 当这种情况时,才完成加载。
使用console.log 得出 在网页加载中,会得出两个数值
interactive //加载中complete //加载完成

页面加载readyState的五种状态
原文如下: 0: (Uninitialized) the send( ) method has not yet been invoked. 1: (Loading) the send( ) method has been invoked, request in progress. 2: (Loaded) the send( ) method has completed, entire response received. 3: (Interactive) the response is being parsed. 4: (Completed) the response has been parsed, is ready for harvesting. 翻译成中文为: 0 - (未初始化)还没有调用send()方法 1 - (载入)已调用send()方法,正在发送请求 2 - (载入完成)send()方法执行完成,已经接收到全部响应内容 3 - (交互)正在解析响应内容 4 - (完成)响应内容解析完成,可以在客户端调用了

其中,我是使用到了 Jquery , 使用到了fadeOut()
adeOut() 方法使用淡出效果来隐藏被选元素,假如该元素是隐藏的。语法:$(selector).fadeOut(speed,callback)如果元素已经隐藏,则该效果不产生任何变化,除非规定了 callback 函数。$(".btn1").click(function(){ $("p").fadeOut();});

附上我的 http://www.jxdf.me/ex/loading.html

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,119评论 19 139
  • afinalAfinal是一个android的ioc,orm框架 https://github.com/yangf...
    passiontim阅读 15,609评论 2 45
  • 大家好,我是婷婷,非常荣幸得到邀请能跟大家交流。希望我的瘦身经历,能给大家一些启发。我这次主要分享的是塑形,因为我...
    回美法阅读 905评论 0 0
  • 2017-04-15 华杉 《大学》相传是曾子所作,甚至可能是秦汉儒者伪托曾子之作,秦汉儒者编辑的,西汉时戴德、戴...
    郁萍阅读 932评论 0 0
  • 每日一抽 #玩卡不卡·每日一抽# 每一位都可以通过这张卡片觉察自己: 1、直觉他叫什么名字?云 2、他几岁了? 3...
    vivipet阅读 285评论 0 0