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