Question

I have a rather large block of data retrieved by Jquery. I append a loader to a div when the form is submitted and then when the data is returned, it is replaced by the html markup in the data. The problem is when the data is returned, the loader disappears and then whilst the browser is rendering the html for display, I get a blank div for around 4 seconds. Is there anyway I can make the loader stay till after the data has been displayed in the browser?

    $("#offerForm").submit(function() {  
    //show loader
             $('#demo').append('<div id="zloader" style="background: #fff url(\'preloader2.gif\') no-repeat scroll 10px center; 
padding-left: 40px;">Loading, please wait...</div>');

    //post the form
         $.post('getoffers.php', $("#offerForm").serialize() 
+ '&page=' + page, function(data) {

                       //show the returned data
               $('#demo').html(data.htmlOutput);
                   }
    }

Answer 1

$.post('<url>', {<data>}, function (data) {
    $('#demo').append(data.htmlOutput).find('#zloader').remove();
});

This will append the new data and then remove the loader.