How to show jQuery work / wait / load?

Question

How to show the loaded image and / or message to the user? If possible, I would like to know how to make it fullscreen with a gray dull background. As if viewing a large picture from some galleries (sorry, there is no link to an example).

I am currently adding a CSS class that has an image and other shaping, but does not work for any reason. Search results are inserted into the div.

HTML

<div id="searchresults"></div> 

CSS

 div.loading { background-image: url('../img/loading.gif'); background-position: center; width: 80px; height: 80px; } 

Js

 $(document).ready(function(){ $('#searchform').submit(function(){ $('#searchresults').addClass('loading'); $.post('search.php', $('#'+this.id).serialize(),function(result){ $('#searchresults').html(result); }); $('#searchresults').removeClass('loading'); return false; }); }); 

Answer 1

Your problem is that you call removeClass('loading') right after you issue the ajax call, and not after it ends.

You can do removeClass('loading') in ajax callback. $.post only provides a success callback:

 jQuery.post( url, [ data ], [ success(data, textStatus, XMLHttpRequest) ], [ dataType ] ) 

And the image loading should be deleted in any case - successful or unsuccessful, therefore it is better to use the complete $.ajax() :

 $('#searchform').submit(function(){ $('#searchresults').addClass('loading'); $.ajax({ type: 'POST', url: 'search.php', data: $('#'+this.id).serialize(), success: function(result){ $('#searchresults').html(result); }, complete: function() { $('#searchresults').removeClass('loading'); } }); return false; }); 

For more information about calls, see the Callback Functions section of $. ajax () docs

Answer 2

Try the following:

  $("#contentLoading").ajaxSend(function(r, s) { $(this).show(); $("#ready").hide(); }); $("#contentLoading").ajaxStop(function(r, s) { $(this).hide(); $("#ready").show(); }); 

#contentLoading will be displayed, which is my gif progress when I start ajax and hide it when ajax stops.