Я не уверен, понимаю ли я, что там происходит. Вы можете попробовать, сделав верхний контейнерный элемент страницы невидимым до тех пор, пока скрипт не будет выполнен.
В файле CSS просто присвоить свойство display: none CSS для контейнера, или еще лучше, сделать это в встроенный стиль для элемента, как это:
<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>
Тогда в JS сделать что-то вроде этого:
/*Your big JS code*/
$("div.body").css("display", "block"); //sets it visible again after code finishes
Вы можете даже поместить Loading рисунок на странице в это время. Просто поместите видимый контейнер с этим фоновым изображением, и, когда тело станет видимым, сделайте это изображение невидимым.
И еще один из возможных решений, чтобы экспериментировать с (не уверен о совместимости браузера): http://bytes.com/topic/javascript/answers/738083-how-suspend-layout
Но оказывается, что здесь беднее решение было принято: Suspend layout during DOM interaction
проблема здесь будет, если браузер отключил javascript, тогда страница не будет отображаться ... – Reigel
это препятствует доступности – rochal
Да, правда. Но таких браузеров мало. Обходным путем было бы разместить элемент