EasyUI界面加载等待效果

为改善使用EasyUI Tab页面加载时的体验,通过添加等待效果来提示用户页面正在加载中。该脚本需先引入easyui.js,并放置于公共js文件中。

使用EasyUI tab页面,加载页面的时候 可能会渲染很慢,体验不是很好,加一个简单的等待效果吧。


使用此脚本需要先引入easyui.js基础脚本。

[javascript]  view plain  copy
  1. var maskWidth = $(window).width();  
  2. var maskHeight = $(window).height();  
  3. var maskHtml = "<div id='maskLoading' class='panel-body' style='z-index:1000;position:absolute;left:0;width:100%;";  
  4. maskHtml += "height:" + maskHeight + "px;top:0'>";  
  5. maskHtml += "<div class='panel-header panel=loading' style='position:absolute;cursor:wait;left:" + ((maskWidth / 2) - 100) + "px;top:" + (maskHeight / 2 - 50) + "px;width:150px;height:16px;";  
  6. maskHtml += "padding:10px 5px 10px 30px;font-size:12px;border:1px solid #ccc;background-color:white;'>";  
  7. maskHtml += "页面加载中,请等待...";  
  8. maskHtml += "</div>";  
  9. maskHtml += "</div>";  
  10. document.write(maskHtml);  
  11. function CloseMask() {  
  12.     $('#maskLoading').fadeOut('fast'function () {  
  13.         $(this).remove();  
  14.     });  
  15. }  
  16. var loadComplete;  
  17. $.parser.onComplete = function () {  
  18.     if (loadComplete)  
  19.         clearTimeout(loadComplete);  
  20.     loadComplete = setTimeout(CloseMask, 500);  
把这个脚本放在公共的js文件里就好了,每次加载页面就会有等待效果了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值