JQUERY prevent page from flickering - better approach

I put the code below in the Masterpage to prevent all the pages from flickering when navigating. However, the page reloads twice. I tried to removed the first line and remain the second line, but the page still flickering, and then remove the second line and remain the page line but the result is the page is blank. What is the best approach to avoid the page from flickering while the page is loading?

$(document).ready(function()开发者_开发知识库 {
    $("body").css("display", "none");
    $("body").fadeIn(1000);
});

one kind of better approach...

Have you considered using ajax/async postbacks for sections of the page instead of performing full postbacks?

You can't really (afaik) prevent that "flicker" otherwise because, what's happening is the browser starts loading a new page (which is a blank white document) and then populates it with your content as it is received. This can give the effect of a "flicker" because you go from page with my content to blank white page to page with my different content. For particularly fast loading pages this might not be at all noticeable, but often, it is.

You could opt for a different approach whereby your header/menus/etc are left untouched. Using jQuery/ajax you can fadeout existing content in a section of your page, load new content from the server, and then fade that new content in. Would that work for you?

Here is an ajax tutorial for you to mull over.

Good luck