jquery - ASP.net MVC - 停止页面渲染直到 JQuery 完成

标签 jquery asp.net-mvc

我正在研究我们的 ASP.Net MVC 页面内容跳转到位的问题。

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

我可以停止页面渲染直到一切完成吗? 不太擅长这类事情,因此任何建议将不胜感激。

最佳答案

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

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

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

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

关于jquery - ASP.net MVC - 停止页面渲染直到 JQuery 完成,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3404397/

相关文章:

javascript - 如何使用 touchstart 和 touchend 事件跟踪移动设备上跨域 iframe 的点击

jquery - Slick Slider JS + 修复了标题重叠问题 - 仅在 Chrome 中

javascript - 仪表板跨域 AJAX 与 jquery

asp.net-mvc - AngularJS $http.put 不适用于 ASP.NET MVC Controller

c# - 为什么程序集似乎被引用但实际上没有

javascript - 可拖放溢出问题

javascript - jQuery:如何从一个路径中选择多个元素?

asp.net-mvc - 如何根据 Asp.Net MVC 中的 View 设置 <body> 类?

jquery - 剑道网格 : Delete button without X icon

c# - 使用 Razor 返回数组中的字符串