如何在打開jQuery對話框時顯示加載圖像

Question

我在iframe中打開我的用戶控件。因此，我的用戶控件花費時間在iframe內顯示。我想顯示一個「加載。請稍候..」圖像，直到我的用戶控件加載到iframe中。我的變化如下：

.js文件

var originalURL = pageURL + "/MDMDataHub/AddAliasPage.aspx?SOURCE_HQ_REF=" + sourceHQRef + "&HQ_SOURCE_NAME=" + sourceName + "&BUSINESS_RID=" + rGroupId; 
           var width = $(this).attr('data-width') || 595; 
           $('#aliasPopUpHeader').find('h4').remove(); 
           $('#aliasPopUpHeader').append(' <h4 class="modal-title" > ' + "Add Parent Alias " + ' confirmation !</h4>'); 
           $("#addAliasPopUp").dialog({ 
            autoOpen: true, 
            width: width, 
            resizable: true, 
            draggable: true, 
            modal: true,           
            show: { effect: 'blind' }, 
           }).find('iframe').attr("src", originalURL); 

aspx頁面

<div class="modal-dialog" id="addAliasPopUp" style="display: none"> 
    <div class="modal-content"> 
     <div class="modal-header" id="aliasPopUpHeader"> 
      <button type="button" class="close closePopup closePopAlias"> 
       <span>&times;</span></button> 
     </div> 
     <div class="modal-body" id="AddAliasConfirmPopUP"> 
      <iframe class="embed-responsive-item" frameborder="0" style="height:600px;width:100%"></iframe> 
     </div> 
     <div class="modal-footer"> 
      <button type="button" id="aliasClosePopUp" class="btn btn-cancel closePopup closePopAlias"> 
       Cancel</button> 
     </div> 
    </div> 
</div> 

現在

上的按鈕的單擊事件，我打開對話框（在提到jQuery的）。我現在想要顯示一個gif圖像，直到我的用戶控件加載到iframe中。我怎樣才能做到這一點。

Answer 1

在頁面加載時顯示gif圖像。

1.添加一個隱藏的div在網頁上<div id="preloader"></div>
2.添加下面的CSS：

    div#preloader { 
    position: fixed; 
    left: 0; 
    top: 0; 
    z-index: 999; 
    width: 100%; 
    height: 100%; 
    overflow: visible; 
    background-image: url('../images/please_wait_animation.gif'); 
    background-color: rgba(255, 255, 255, 0.8); 
    background-position: 50% 50%; 
    background-repeat: no-repeat; 
    } 

然後，處理正在發生時，它使用$('#preloader').show();顯示。

最後，在頁面加載時使用$('#preloader').hide();來隱藏div。