Show a message while loading modal dialog

Question

I'm loading a modal dialog on a web part. Sometimes it takes a lot of time to load, like 6/7 secs. Here's the code:

function Init(title, id) {

var dialogOptions = SP.UI.$create_DialogOptions();
dialogOptions.url = '/_layouts/MyWebPart/MyModalDialog.aspx?id='+id;
dialogOptions.title = "My Modal Dialog";
dialogOptions.width = 660;
dialogOptions.height = 400;
dialogOptions.dialogReturnValueCallback = function (res, retVal) {
    if (res === SP.UI.DialogResult.OK) {
        RTEActions(retVal);
    }
};
SP.UI.ModalDialog.showModalDialog(dialogOptions);

return false;
}

Is there any way to show a message or a loading effect while MyModalDialog.aspx is not fully loaded?

Answer 1

asked somwhere else:

How do I show a loading div when opening a modal dialog from a CustomAction?

the accepted answer goes indepth with:

SP.UI.ModalDialog.showWaitScreenSize or SP.UI.ModalDialog.showWaitScreenWithNoClose.

or use:

<!-- within you site header -->
<script type="text/javascript">
/* display loader only if JavaScript is enabled, no JS-lib loaded at this point */
document.write('<div id="loader" style="display:table; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10000; background: #fff;">'
    + '<div style="display:table-cell; vertical-align:middle; text-align: center;">'
    + 'loading…<br /><img src="icon.load.gif" />'
    + '</div></div>');
</script>


<!-- at the bottom of you HTML (right before closing BODY-tag) -->
<script src="jquery.min.js"></script>
<script type="text/javascript">
/* hide the loading-message */
$(window).load(function(){
    $('#loader').fadeOut(500);
});
</script>

first part is for loading gif image (animated loading image)

second part waits for page to be fully loaded, once fully loaded it would fade out!.

You need to ammend to suit your needs:

takem from here:

https://stackoverflow.com/questions/10446128/how-can-i-show-a-loading-screen-while-a-really-large-image-is-loading

Answer 2

You can use SP.UI.ModalDialog.showWaitScreenWithNoClose('Title here', 'Message here...'); to do just that.