Question

I have an AJAX call I’m making. It’s synchronous so it ‘hangs’ while the content loads. Before the AJAX call I append a preloading image to the soon-to-be parent node of the incoming content:

function makePreLoader( parentNode )
{
  var img = document.createElement( "img" );
  img.src = "images/preloader.gif";
  parentNode.appendChild( img );
}


function getData( )
{
  var parentNode = document.getElementById( "myParentNode" );
  makePreloader( parentNode );

  $.ajax( 
    "http://www.example.com/",
    {
      success: function( resp )
      {
        $( parentNode ).html( resp );
      },
      async: false
    }
  );
}

My script at example.com is a simple php script that hangs 7 seconds and then replies “done”.

When I call ‘getData’ the expected behavior is to see the preloading image load, and then it should be replaced by “done”.

The actual behavior is the call hangs (apparently without appending the preloader) and then loads the content.

Has anyone had a similar issue? Can someone recommend a good solution?

Answer 1

use ajaxStart instead

here is an example how to do it

https://stackoverflow.com/a/68503/413670