jquery 加载等待效果

最新推荐文章于 2022-06-28 11:42:45 发布

软件-攻城狮

最新推荐文章于 2022-06-28 11:42:45 发布

阅读量909

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/smshuxue/article/details/14216223

版权

JavaScript 专栏收录该内容

67 篇文章 0 订阅

订阅专栏

要点样式

.datagrid-mask{

position:absolute;

left:0; top:0; width:100%; height:100%;

background:#ccc; opacity:0.3;

filter:alpha(opacity=30); display:none;

}

.datagrid-mask-msg{

position:absolute; top:50%; margin-top:-20px; width:auto;

height:16px; padding:12px 5px 10px 30px;

background:#fff url('images/pagination_loading.gif') no-repeat scroll 5px 10px;

border:2px solid #6593CF;

color:#222; display:none; }

</style>

这是图片'images/pagination_loading.gif'

js方法

 
  <!DOCTYPE HTML PUBLIC  
  "-//W3C//DTD HTML 4.01 Transitional//EN" 
  > 
 
  <html> 
 
  <head> 
 
  <title>test1.jsp</title> 
 
  <style type= 
  "text/css" 
  > 
 
  .datagrid-mask{ 
 
  position:absolute; 
 
  left: 
  0 
  ; 
 
  top: 
  0 
  ; 
 
  width: 
  100 
  %; 
 
  height: 
  100 
  %; 
 
  background:#ccc; 
 
  opacity: 
  0.3 
  ; 
 
  filter:alpha(opacity= 
  30 
  ); 
 
  display:none; 
 
  } 
 
  .datagrid-mask-msg{ 
 
  position:absolute; 
 
  top: 
  50 
  %; 
 
  margin-top:-20px; 
 
  width:auto; 
 
  height:16px; 
 
  padding:12px 5px 10px 30px; 
 
  background:#fff url( 
  'images/pagination_loading.gif' 
  ) no-repeat scroll 5px 10px; 
 
  border:2px solid #6593CF; 
 
  color:# 
  222 
  ; 
 
  display:none; 
 
  } 
 
  button { font-size:12px; margin:2px; } 
 
  p { width:150px; border:1px red solid; } 
 
  .divall{color:red; font-weight:bold; } 
 
  </style> 
 
  <script type= 
  "text/javascript" 
  src= 
  "<%=request.getContextPath()%>/js/jquery-1.9.1.js" 
  charset= 
  "UTF-8" 
   ></script> 
 
  </head> 
 
  <script type= 
  "text/javascript" 
  > 
 
  /** 
 
  $(document).ready(function()   {   
 
  alert($(window).height()); //浏览器时下窗口可视区域高度   
 
  alert($(document).height()); //浏览器时下窗口文档的高度   
 
  alert($(document.body).height());//浏览器时下窗口文档body的高度   
 
  alert($(document.body).outerHeight(true));//浏览器时下窗口文档body的总高度包括border padding margin   
 
  alert($(window).width()); //浏览器时下窗口可视区域宽度   
 
  alert($(document).width());//浏览器时下窗口文档对于象宽度   
 
  alert($(document.body).width());//浏览器时下窗口文档body的高度   
 
  alert($(document.body).outerWidth(true));//浏览器时下窗口文档body的总宽度包括border padding margin   
 
  } ) ; 
 
  */ 
 
  function _test(){ 
 
  //alert(1111); 
 
  var items =  
  new 
  Array; 
 
  items = [ 
  new 
  Array( 
  1 
  , 
  2 
  , 
  3 
  ), 
  new 
  Array( 
  11 
  , 
  22 
  , 
  33 
  ), 
  new 
  Array( 
  111 
  , 
  222 
  , 
  333 
  ), 
 
  new 
  Array( 
  4 
  , 
  5 
  , 
  6 
  ), 
  new 
  Array( 
  44 
  , 
  55 
  , 
  66 
  ), 
  new 
  Array( 
  444 
  , 
  555 
  , 
  666 
  ), 
 
  new 
  Array( 
  7 
  , 
  8 
  , 
  9 
  ), 
  new 
  Array( 
  77 
  , 
  88 
  , 
  99 
  ), 
  new 
  Array( 
  777 
  , 
  888 
  , 
  999 
  )]; 
 
  //alert("start:"+items.length); 
 
  var i = items.length %  
  4 
  ; 
 
  //alert("第1个i:值:"+i); 
 
  while 
  (i){ 
 
  //process(items[--i]); 
 
  process(items[--i]); 
 
  } 
 
  i = Math.floor(items.length /  
  4 
  ); 
 
  //alert("第2个i:值:"+i); 
 
  var j= items.length; 
 
  //alert("进入第二阶段：J："+j); 
 
  while 
  (i){ 
 
  // alert("第二阶段：次数："+i); 
 
  //process(items[--j]); 
 
  //process(items[--j]); 
 
  //process(items[--j]); 
 
  //process(items[--j]); 
 
  process(items[--j]); 
 
  process(items[--j]); 
 
  process(items[--j]); 
 
  process(items[--j]); 
 
  --i; 
 
  } 
 
  _loading(); 
 
  alert( 
  "end" 
  ); 
 
  } 
 
  function _loading(){ 
 
  var h = document.body.clientHeight;  
 
  $( 
  "<div class=\"datagrid-mask\"></div>" 
  ).css({display: 
  "block" 
  ,width: 
  "100%" 
  ,height:h}).appendTo( 
  "body" 
  );  
 
  $( 
  "<div class=\"datagrid-mask-msg\"></div>" 
  ).html( 
  "正在处理，请稍候。。。" 
  ).appendTo( 
  "body" 
  ).css({display: 
  "block" 
  , 
 
  left:($(document.body).outerWidth( 
  true 
  ) -  
  190 
  ) /  
  2 
  , 
 
  top:(h -  
  45 
  ) /  
  2 
  }); 
 
  //setTimeout('_stop()', 3000); 
 
  } 
 
  function _stop(){ 
 
  $( 
  '.datagrid-mask-msg' 
  ).remove(); 
 
  $( 
  '.datagrid-mask' 
  ).remove(); 
 
  } 
 
  function process(arraylist){ 
 
  //alert(arraylist[0]+","+arraylist[1]+","+arraylist[2]); 
 
  } 
 
  function showHeight(ele, h) { 
 
  $( 
  "div" 
  ).text( 
  "The height for the " 
  + ele + 
 
  " is " 
  + h +  
  "px." 
  ); 
 
  } 
 
  $( 
  "#getp" 
  ).click(function(){ 
 
  alert( 
  "getp" 
  ); 
 
  showHeight( 
  "paragraph" 
  ,$( 
  "p" 
  ).height()); 
 
  }); 
 
  $( 
  "#getd" 
  ).click(function(){ 
 
  alert( 
  "getd" 
  ); 
 
  showHeight( 
  "document" 
  ,$(document).height()); 
 
  }); 
 
  $( 
  "#getw" 
  ).click(function(){ 
 
  alert( 
  "getw" 
  ); 
 
  showHeight( 
  "window" 
  ,$(window).height()); 
 
  }); 
 
  function getp(){ 
 
  showHeight( 
  "paragraph" 
  ,$( 
  "p" 
  ).height()); 
 
  } 
 
  function getd(){ 
 
  showHeight( 
  "document" 
  ,$(document).height()); 
 
  } 
 
  function getw(){ 
 
  //showHeight("window",$(window).height()); 
 
  alert($(window).height()); 
 
  showHeight( 
  "window" 
  ,document.body.clientHeight); 
 
  } 
 
  </script> 
 
  <body> 
 
  达夫设备, <a href= 
  "javascript:_test();" 
  >点击</a> <br> 
 
  <a href= 
  "javascript:_loading();" 
  >点击load</a> <br> 
 
  <button id= 
  "getp" 
  onclick= 
  "javascript:getp()" 
  >Get Paragraph Height</button> 
 
  <button id= 
  "getd" 
  onclick= 
  "javascript:getd()" 
  >Get Document Height</button> 
 
  <button id= 
  "getw" 
  onclick= 
  "javascript:getw()" 
  >Get Window Height</button> 
 
  <br><div  
  class 
  = 
  "divall" 
  > </div> 
 
  <p> 
 
  Sample paragraph to test height 
 
  </p> 
 
  </body> 
 
  </html>

软件-攻城狮

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery 加载等待效果

要点样式.datagrid-mask{ position:absolute; left:0; top:0; width:100%; height:100%; background:#ccc; opacity:0.3; filter:alpha(opacity=30); display:none;}.datagrid-mask-msg{ posi
复制链接

扫一扫

专栏目录