I am looking at an issue whereby our ASP.Net MVC page content jumps into position.
If I put a debug point in one of our .js files I can see that the page has already rendered into its initial positions and then the .js files do its stuff and the page redraws into the correct state. This happens pretty quickly but slow enough that a jump on the screen can be seen.
Can I stop the page rendering until everything has finished? Not great at this sort of stuff so any suggestions would be appreciated.
I am not sure whether I understand what's happening there. You could try by rendering the topmost container element of the page invisible until the script is done.
In the CSS file just assign the display: none CSS property to the container, or better yet, do it in the inline style to the element like this:
<body>
<div class="body invisible" style="display: none;">
Your content
</div>
<script type="text/javascript">
$("div.body").removeClass("invisible"); //in case JS is present, don't reveal the element until scripts execute.
</script>
<style type="text/css">
div.invisible {display: block !important;} /*In case no JS support present, reveal the content after page fully loads*/
</style>
</body>
Then in the JS do something like this:
/*Your big JS code*/
$("div.body").css("display", "block"); //sets it visible again after code finishes
You can even place a Loading gif image on the page during this time. Just place a visible container with that background image, and when making the body visible, make that image invisible.
AND, another possible solution to experiment with (not sure about browser compatibility): http://bytes.com/topic/javascript/answers/738083-how-suspend-layout
But it appears that here a poorer solution was accepted: Suspend layout during DOM interaction
