Question

我在iframe中打开我的用户控件。因此，我的用户控件花费时间在iframe中显示。我想要显示＆＃34;正在加载。请等待..＆＃34; 图片，直到我的用户控件加载到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>

现在在按钮的click事件上，我打开对话框（在jquery中提到）。我现在想要显示一个gif图像，直到我的用户控件加载到iframe中。我怎样才能做到这一点。

Answer 1

在页面加载时显示gif图像。

1.在页面<div id="preloader"></div>上添加隐藏的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。

打开jquery对话框时如何显示加载图像

1 个答案: