对于连接速度较慢的用户,加载图像显示太晚

时间:2015-12-21 19:18:32

标签: javascript html asp.net-mvc

问题在于现有的ASP.NET MVC 4项目。 View本身并不是那么大,但也有几个服务电话,会发生的情况是网络连接速度慢的人报告说,在他们请求页面的一段时间内它没有响应,所以他们不知道是否内容正在加载或出现问题。

所以一般来说,我需要的是一种方法来显示加载图像作为此页面中的第一件事(或者至少足够快),因此即使浏览器需要一些时间来下载完整内容,至少用户会知道某事正在发生。

然而,似乎这并不像听起来那么微不足道。我提出了两个想法,一个已被证明在所有情况下都不起作用,第二个也是许多人不推荐的东西。

我尝试过的是在JavaScript标记中使用纯<head>,如下所示:

<html>
<head>
<script>
    document.write("<div style='margin-left: 50px; margin-top : 50px;'>LOADING...</div>"); 
</script>
</head>

当然,造型只是为了得到这个想法。这看起来好像直到最近才开始工作,在IE 11的一小部分页面上发生了破坏,经过一些调查后证明是由于在document.write()标记内使用了<head>。虽然这似乎适用于大多数浏览器和版本,但它潜在的危险需要改变方法。

第二个想法与此非常相似 - 直接在<head>标记中写入,但这次不是使用document.write()而是直接将html标记放在那里。从我所读到的内容来看,这也是灾难的一种方法,所以我甚至不想尝试,但这些是我想出的两个想法。由于主流解决方案继承了DOM的某些部分已经加载,因此您可以使用它来应用行为/风格,所以其他所有内容都不适用于缓慢的互联网连接。

我希望我不是第一个遇到这个问题的人,所以我很感激有关如何解决这个问题的任何建议。由于我正在使用ASP.NET MVC 4,因此有一个想法是使用一个带有视图的专用控制器,只是为了显示加载图像然后移动到请求的视图而首先调用它。即使这个想法看起来很有趣,我也没有时间考虑它,但这听起来也很复杂,但无论如何,所有的帮助都会受到赞赏。

2 个答案:

答案 0 :(得分:1)

当遇到同样的问题时,我们按照您的提及做了:首先使用微小的加载图标加载超轻量级页面&amp; &#34;加载中&#34;文本,然后回调到服务器使用ajax拉下块中的重要内容。

如果您的内容非常繁重,那么您还需要确保在网络服务器层启用了gzip压缩。

答案 1 :(得分:1)

不要阻止DOM的呈现。加载页面并在关闭正文标记之前调用脚本,并附加到Object obj; //or Object obj{}; DOMContentLoaded之类的事件(如果您正在使用jQuery,那将是window.load)。换句话说,在运行任何JavaScript之前,您应该允许页面完全加载,即使它是空的。

然后,不要担心写下#34;正在加载&#34; div动态。只需将其包含在呈现的HTML中并最初隐藏它。在发出任何AJAX调用之前,您的JavaScript将做的第一件事就是显示这个&#34;正在加载&#34;格。