0

I have MySites displaying through an iFrame via the PageViewer Web part which takes some time to load initially. The user is unaware of content loading as it only shows a blank page until finished. Just wondering if anyone has a solution for showing a busy indicator or the SP 'Working on it' dialog until the load is finished.

I already have the following attached to the iFrame element (which hides some divs after it loads). 

mySiteIframe.load(function(){
 //hide some divs
});

Is there a preload event I can use to display a busy indicator and hide it on the .load below? Or is there something OOB I can use? Thanks for reading!

Improve this question

2 Answers 2

Reset to default
2

Displaying a loading indicator on a iframe is quite easy. Just display the loading animation by default over the iframe and hide it when the javascript onload event for the iframe fires - like onload="hideLoading()". In SP there are several ways to do this. You could edit the masterpage and insert the indicator hard, you could build your own pageviewer webpart that renders out a indicator, or you could do it fully client side.

The best way depends on your usecase.

Here's some info about displaying and hiding the indicator.

Edit

I actually created a very generic approach to do this.

Improve this answer
2
  • Thanks Max. This post didn't directly answer my question as and I can't hard code the onload event in an iFrame that doesn't exist until the Pageviewer renders it. Commented May 15, 2014 at 14:46
  • You dont have to hardcode it. Attach it clientside via JS Commented Jun 3, 2014 at 7:16
0

Here is the solution I came up with. It will show the SP Waiting dialog initially then hide it after the iFrame loads. Just throw this in a Content Editor with a script tag:

$(document).ready(function(){

//Show wait dialog initially
window.parent.eval("window.waitDialog = SP.UI.ModalDialog.showWaitScreenWithNoClose('Loading MySites', '', 90, 450);");


var mySiteIframe = $("#MSOPageViewerWebPart_WebPartWPQ2");
   mySiteIframe.load(function(){

     //Close Wait Dialog after iFrame loads
     if (window.parent.waitDialog != null) 
     {
        window.parent.waitDialog.close();
     }

  });
 });
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.