Question

I am developing a web app and in this app I sometimes load content with the jQuery ajax POST method. This works very good but there is a problem.

After successful POST I load the page content (page) that I get in return.
The problem with this is that when it “arrives” it is not styled and I can see the raw output for a split second and then the styling kicks in.

How can I avoid this “naked” moment?

This is my code:

$.ajax ({
    type: "POST", 
    url: "http://example.com/resource/", 
    data: {image_id: image_id},
    beforeSend: function (html) {
        $('#sidebar').html('Loading');
    },
    success: function (html) {
      $('#sidebar').html(html);
    },
    error: function (html) {
        $('#sidebar').html('Something went wrong!');
    }
});

Answer 1

Make it hidden until all the data is in place, then show it with the content:

success: function (html) {
    $('#sidebar').hide().html(html).show();
},