如何在打开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。