• js 不用onload的loding


    第一种 简单的、

    点击按钮的时候显示正在校验中...   校验完成了之后 校验成功

    效果就是执行完file_check后 然后不知道怎么就用了settimeout 就进入到了 login_message函数 方法执行完成 让显示校验成功如图1 图2

    function file_Check()
    {
        setTimeout("login_message();",0);
        var loding='<div class="text-align:cengter;padding-top:40px;100%">   <img class="loading_spinner" src="images/blank2.gif"/>';
    	loding+='<span class="loading_spinner_text loading-text">';
    	loding+='正在校验请稍候....';
    	loding+='</span>';
        loding+='</div>';
        $('message').innerHTML=loding;
        $('message').style.color='#ffffff';
    }
    
    function login_message()
    {
        var table=xjjhxd.LookInfo1().value;
          if(table!="")
            $('message').innerHTML="校验成功!";
            $('message').style.color='#00DD00';
         else
              $('message').innerHTML="校验失败!";
    }
    

    第二种  常用的

    点击上传数据 出现img3  上传完成 gif隐藏

    效果就是执行zheli() 让出现层如图3显示gif 执行完毕 隐藏gif 

    function good(){
      ingBox = $$("div");
    	  lodingBox.style.position="fixed";
    	  lodingBox.style.width=screen.width+"px";
    	  lodingBox.style.top="0px";
    	  lodingBox.style.left="0px";
          lodingBox.style.height=screen.height+"px";
          lodingBox.style.backgroundColor="#cccccc";
          lodingBox.style.filter="Alpha(Opacity=50)";
          lodingBox.style.opacity=0.5;
          lodingBox.id="lodingBox";
    
    
    	 var imgdiv=$$("div");	
    	 var imgdiv_width="300";
    	 var imgdiv_height="100";
    	 var imfdiv_left=screen.width-screen.width/2-imgdiv_width/2;
    	 var imfdiv_height=screen.height-screen.height/2-imgdiv_height/2-100;
    	 imgdiv.style.position="fixed";
    	 imgdiv.style.left=imfdiv_left+"px";
    	 imgdiv.style.top=imfdiv_height+"px";	
    	 imgdiv.style.width=imgdiv_width+"px";
    	 imgdiv.style.height=imgdiv_height+"px";
         imgdiv.style.backgroundColor="#FFFFFF";
         imgdiv.id="imgdiv";
    	
          var lodingImg=$$("img");
          lodingImg.src="Images/spinner_32px_dfe1e3.gif";
          lodingImg.style.paddingTop="25px";
          lodingImg.style.paddingLeft="25px";
          
          var lodingText=$$("span");
          lodingText.innerHTML="正在存入数据,请稍候....";   
          
             
          imgdiv.appendChild(lodingImg);
          imgdiv.appendChild(lodingText);
          
          $("gn").appendChild(lodingBox);       
    	  $("gn").appendChild(imgdiv); 
    	  setTimeout("zheli();",0); 
    }
    
    function zheli(){
    var table=xjjhxd.good().value;
     //隐藏loding
      $("lodingBox").style.display="none";
      $("imgdiv").style.display="none"; 
    }
    

    参考:http://www.phpv.net/html/1700.html

    avaScript可否多线程? 深入理解JavaScript定时机制

    疑问?

    1、难道js真的不能多线程么  只能执行一个在执行另一个

    2. 第二个例子 那个gif不动的 为什么 

    关于 fixed 参考:
    http://www.w3help.org/zh-cn/causes/RM8013
    http://www.pczpg.com/html/bianchengkaifa/div_css/20090803/12548.html

    解决fixed ie8不支持 有几种办法 上面网站都有

    关于settimeout参考:

    参考:http://blog.csdn.net/turkeyzhou/archive/2008/08/07/2784934.aspx

    总结:

    1、要想position:fixed生效 有许多办法 咱们这就是最简单的办法用 xhtml1.0 
    ie8对position:fixed是不支持的
    这要在页面第一行加上这个
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    2、试过这段代码就知道 总是先执行放settimeout的那个函数 最后在执行settimeout里边的方法 在这里看到是没有线程效果的o ·但是可以访线程 可以参考

    http://blog.csdn.net/turkeyzhou/archive/2008/08/07/2784934.aspx

    <script language="javascript">
         function main(){
          for(var index=0;index<10;index++){
          alert("main thread"+index);
          setTimeout(secondary,0);
          }
         }
         function secondary(){
         alert("secondary");
         }
       main();
       </script>
    

    3、至于gif不动的原因 我百度了下

    第一种说法 :

    你把设置图片显示的代码和数据库查询的代码放在了同一个函数中,当程序执行到数据查询的时候延迟,图片肯定不会动,因为他们处在同一个线程内,解决这个问题可以通过多线程,将数据查询放在另外一个新的线程中去执行,或者使用updateprogress数据控件放在updatepanel中,图片放在updateprogresS中。

    第二种说法:

    你的电脑既是客户端,又是服务器,显示动画的资源被WEB服务所占用了

    经过我的实验,用公司另外一台电脑访问,这个是动的 本机是不动的  即第二种说法正确!!!

    猜想:诸如许多 dataset缓存之类的 在本机 存在 在客户端就没有啦

  • 相关阅读:
    支付宝API
    三级联动
    高精尖面试题(七)
    高精尖面试题(六)
    高精尖面试题(五)
    第十二章、使用继承
    第十章、使用数组
    第十一章、理解参数数组
    第九章、使用枚举和结构创建值类型
    第八章、理解值类型和引用
  • 原文地址:https://www.cnblogs.com/0banana0/p/2059091.html
Copyright © 2020-2023  润新知