i am having two inline visualforce pages that has been embedded in account detail page. The data for the inline vf pages are coming from a webservice. Since it is a webservice call it takes few seconds for the page to show the data. it means the vf pages section SAP and Open Documents displays blank white space as show in the screen shot while loading account detail page. Please note the first screen shot taken at the time of account detail page loading shows blank white space.

what i want is to display a loading image in the white space until the data comes for the page from the service. attached is the screen shot showing the issue...

More Comments: if you see the screen shot 2, "Open Documents" is an inline vf page which by default should display results of Open Quotation on account detail page button.. User may click other buttons to see other details once it has been loaded. Will VF remoting suitable for write or refreshing a DOM like pageblocktable?


enter image description here


1 Answer 1


Are your webservice calls being invoked asynchronously (via VF Remoting) or are they part of the page load (action method on the <apex:page>)?

If they are being invoked via Visualforce Remoting, you can have a loading image immediately display on the screen and a callback for your VF Remote method that removes the image.

If you are using the action method on the <apex:page> tag, you'll likely want to switch to VF remoting so your page load isn't held up waiting for the callout to complete.

Update: I added some sample code below based on the link above to show how something like this might work. It isn't "working" code, but more along the lines of psuedocode.

Sample VF Page

<apex:page controller="TestController">
  <img id="loading-image" src="/myImage.png"></img>
  <div id="my-data"></div>

  <script type="text/javascript">
    var j$ = jQuery.noConflict();    

    function getRemoteAccount() {
        // This remoting call will use the page's timeout value

    function handleResult(result, event) {
      // TODO - update the UI

      // Hide the loading image

Sample Apex Class

public with sharing TestController {
  global static String getCalloutInfo()
    // TODO - make callout

    // return value to UI
    return '{"label":"mock-data"}';
  • Thanks Michael. it is part of page load. the call to the webservice is through a getter method written in the extension. so it automatically happened when page loads.
    – Bforce
    Feb 6, 2014 at 14:26
  • @baskaran Micheal's answer is correct. Change your code to perform an actionFunction or VF Remoting call after the initial page loads.
    – sfdcfox
    Feb 6, 2014 at 14:42
  • @sfdcfox could you please clarify me what it means by "initial page loads". i am assuming some method which is having vf remoting logic that would be called in action attribute of <apex:page ? is that right?
    – Bforce
    Feb 6, 2014 at 14:55
  • What VF Remoting implies is that you originally load your page and maybe some of the faster to render information (non-callouts). Then, you'll set up an actionFunction of VF remoting call to your controller that makes the more time consuming calls that run AFTER the page loads asynchronously, and when they finish there is a callback javascript method on your VF page where you can update your UI accordingly. Feb 6, 2014 at 14:57
  • @MichaelWelburn how to handle if the DOM element is a pageblocktable with paginated results. please have a look some more screen shots
    – Bforce
    Feb 6, 2014 at 15:54

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .