zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    Well, that was fun! An adventure in WCF, SSL, and Host Headers (转)
    算法还重要吗?
    Silverlight测试——利用Ranorex实现数据驱动测试
    MSSQl分布式查询
    Silverlight 4 CHM中文离线文档已提供下载
    快速打包你的应用程序——Inno Setup
    IE 9 Beta 测试Bug
    IE 9 Bate 泄露版
    Windows PowerShell初体验——.NET对象支持
    多样化实现Windows Phone 7本地数据库访问<2>
  • 原文地址:https://www.cnblogs.com/ar13/p/7679512.html
Copyright © 2011-2022 走看看