Easyui中存在頁籤Tabs,通過頁籤可以將若干頁面集合到一起，但是當tab新增一個遠端介面的時候，如果頁面載入量較多，會出現長時間的等待，這就需要遮罩。

因為我的專案主要是在tab中新增content,通過iframe載入遠端檔案,所以下面自定義的遮罩主要是對應iframe來設定的.設定遮罩最主要的是獲取iframe是否已經載入完成,

判斷iframe是否載入完成的主要程式碼:

if(iframe.attachEvent){       //應對ie瀏覽器
    iframe.attachEvent("onload",function(){
        alert("Local iframe is now loaded."
 
);});}else{
    iframe.onload =function(){  //對應其他瀏覽器
        alert("Local iframe is now loaded.");};}

其中iframe是你獲取的頁面的iframe.

獲取了判斷iframe是否載入完成的方法，其他的方面就很容易解決了。首先就是要獲取iframe,由於在

tabs中，我利用tabs中的onAdd:function(title,index)方法，程式碼如下:

var $tabBody = $(this).tabs('getTab',index); //獲取當前新增的tab頁面

var $iframe = $tabBody.find("iframe")[0];   //獲取當前tab頁面中的iframe.
 

獲取了這些準備工作基本就完成了，組合一下就可以實現tab開啟時遮罩，具體程式碼如下:

onAdd:function(title,index) {
      var $tabBody = $(this).tabs('getTab',index);
      var $container = $('<div style="position:absolute;z-index:1000;top:30px;left:0px;width:100%;height:100%;'+
           'background:#C9C9C9;text-align:center;padding-top: 20%;">'+
           '<div class="mask-message" style="z-index:3;width:auto;height:16px;'+
           'line-height:16px;position:absolute;top:30%;left:40%;border:2px solid #d4d4d4;'+
           'padding: 12px 5px 10px 30px;background: #ffffff url(\'../../themes/default/images/loading.gif\')'+
           ' no-repeat scroll 5px center;">正在載入,請稍後...</div></div>').appendTo($tabBody);
      var $iframe = $tabBody.find("iframe")[0];


      if($iframe.attachEvent) {
  $iframe.attachEvent("onload", function(){
$container.remove(); 
  });
      } else {
 $iframe.onload = function() {
$container.remove(); 
};
     }
}
 

本文參考連結：http://blog.csdn.net/programmer_sir/article/details/44840075