对于连接速度较慢的用户来说，加载图像显示得太晚

Loading image is shown too late for users with slow connection

本文关键字：加载 图像 显示 用户 于连接 连接 速度      更新时间：2023-09-26

问题与现有的ASP.NET MVC 4项目有关。View本身并没有那么大，但也有几个服务呼叫，发生的情况是，互联网连接缓慢的人报告说，在一段时间内，当他们请求页面时，页面一直没有响应，所以他们不知道内容是否正在加载或出了问题。

因此，一般来说，我需要的是一种方法，将加载图像显示为该页面的第一件事（或者至少足够快），因此即使浏览器下载完整内容需要一些时间，至少用户会知道发生了什么。

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

我尝试在<head>标签中使用纯JavaScript，如下所示：

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

当然，造型只是为了得到这个想法。这似乎一直有效，直到最近，在IE 11的一个小版本中，页面破裂，经过一些调查，证明是由于<head>标签中使用了document.write()。尽管这似乎在大多数浏览器和版本上都有效，但这是一个潜在的危险，这需要改变方法。

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

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

当遇到同样的问题时，我们做了你提到的：首先加载一个超轻量级的页面，并带有一个小的加载图标&"正在加载…"文本，然后调用回服务器，使用ajax将大量内容分块删除。

如果您的内容真的很重，还值得一提的是，您需要确保在web服务器层也启用了gzip压缩。

不要阻止DOM的呈现。加载页面并在关闭body标记之前调用脚本，并附加到类似DOMContentLoaded或window.load的事件（如果使用jQuery，则为$(document).ready）。换句话说，在运行任何JavaScript之前，您应该允许页面完全加载，即使它是空的。

然后，不用担心动态地编写"Loading"div。只需将其包含在渲染的HTML中，并在初始时将其隐藏即可。在发出任何AJAX调用之前，JavaScript要做的第一件事就是显示这个"Loading"div。

相关文章：