Question

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

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

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

Answer 1

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

在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

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

1 个答案: