ASP.net MVC - 停止页面呈现直到JQuery完成

时间:2010-08-04 09:56:04

标签: jquery asp.net-mvc

我正在研究一个问题,即我们的ASP.Net MVC页面内容会跳到位。

如果我在我们的一个.js文件中放置一个调试点,我可以看到该页面已经渲染到其初始位置,然后.js文件执行其中的内容并且页面重绘为正确的状态。这种情况发生得相当快,但足够慢,可以看到屏幕上的跳跃。

我可以停止页面渲染,直到一切都完成了吗? 这种东西不是很好,所以任何建议都会受到赞赏。

1 个答案:

答案 0 :(得分:3)

我不确定我是否理解那里发生的事情。 您可以尝试将页面的最顶层容器元素呈现为不可见,直到脚本完成。

在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 gif图像。只需放置一个带有背景图像的可见容器,并在使主体可见时,使该图像不可见。

AND,另一种可能的实验解决方案(不确定浏览器兼容性):http://bytes.com/topic/javascript/answers/738083-how-suspend-layout

但似乎这里接受了一个较差的解决方案:Suspend layout during DOM interaction