how to avoid white screen while page is loading via ajax or normal request

Question

I have encountered this problem before and so far I have applied ajax beforeSend:function() parameter to display a loading image, though for normal form requests and page reload is there any alternative way to display a loader instead of just a plain white background as to prevent clients from thinking the pages has crashed.

Answer 1

I prefer to have a "loading" image as a background in the center of the body tag. The main wrapper of the app/site would be toggled for ajax calls and you only need to toggle a class on the main wrapper. While the wrapper is hidden you'll can see the loading imagen on the body until new content arrives. Pretty cheap way and looks nicely on mobile.

Demo