对于连接速度慢的用户，加载图像显示为时已晚
[英]Loading image is shown too late for users with slow connection
问题描述
The issues is with existing ASP.NET MVC 4 project. 
问题是现有的ASP.NET MVC 4项目。 The View itself is not that big but there are also several service calls and what happens is that people with slow internet connection reports that for some period of time when they request the page it stay unresponsive, so they don't know if the content is loading or something went wrong. View本身并不大，但是也有多个服务呼叫，发生的情况是互联网连接速度慢的人报告说，他们请求页面一段时间后保持不响应，因此他们不知道内容是否加载或出现问题。
So in general, what I need is a way to show a loading image as the very first thing from this page (or at least fast enough) so even if it takes some time for the browser to download the full content, at least the user will know that something is going on. 因此，总的来说，我需要的是一种将加载图像显示为该页面上第一件事的方式（或至少足够快），因此即使浏览器需要花费一些时间来下载全部内容，至少对于用户会知道发生了什么事。
However it seems that this is not as trivial as it sounds. 但是，似乎这听起来并不简单。 I came up with two ideas, one was already proven to not work in all cases and the second is also something that many people doesn't recommend. 我提出了两个想法，一个已经被证明不能在所有情况下都起作用，第二个也是很多人不推荐的想法。
What I've tried was to use pure JavaScript in the <head> tag like so: 我试过的是在<head>标记中使用纯JavaScript ，如下所示：
<html>
<head>
<script>
document.write("<div style='margin-left: 50px; margin-top : 50px;'>LOADING...</div>");
</script>
</head>
Of course the styling is just to get the idea. 当然，样式只是为了获得创意。 This seemed like it was working until recently when on a minor build of IE 11 the page broke which after some investigation was proven to be due to the usage of document.write() inside the <head> tag. 直到最近，在IE 11的次要版本上，页面都中断了，这似乎似乎一直在起作用。经过一些调查证明，这是由于<head>标记内使用document.write()所致。 Even though this seems to work on most browsers and versions the fact that it's a potential danger requires a change in the approach. 即使这似乎适用于大多数浏览器和版本，但存在潜在危险这一事实需要更改方法。
The second idea is pretty similar to this, again - writing directly in the <head> tag but this time instead of using document.write() just putting the html markup directly there. 第二个想法与此非常相似-直接在<head>标记中编写，但是这次而不是使用document.write()只是将html标记直接放在此处。 From what I've read this is also a recipe for disaster so I don't even want to try it, but those are the two ideas that I could came up with. 从我读到的内容来看，这也是灾难的根源，所以我什至不想尝试，但这是我可以想到的两个想法。 Everything else just doesn't work for slow internet connections since the mainstream solutions relays on the fact that some part of the DOM is already loaded so you can use it to apply behaviour/style. 由于主流解决方案基于DOM某些部分已经加载的事实，因此您可以使用它来应用行为/样式，这一切对互联网连接速度慢都不起作用。
I hope I'm not the first one that got this problem so I would appreciate any suggestion on how to solve this issue. 我希望我不是第一个遇到此问题的人，所以我很乐意就如何解决此问题提出任何建议。 Since I am using ASP.NET MVC 4 there was an idea to use a dedicated controller with view which to get called first just for the sake of showing the loading image and then moving to the requested view. 由于我使用的是ASP.NET MVC 4因此有一个想法，即使用带有视图的专用控制器，首先为了显示正在加载的图像，然后再移至请求的视图，而首先调用该视图。 Even though this idea seems interesting I didn't have the time to think it over, it also sounds a pretty complicated, but anyways, all help will be appreciated. 尽管这个想法似乎很有趣，但我没有时间去考虑，但听起来也很复杂，但是无论如何，我们将不胜感激。
2 个解决方案
解决方案1
1 2015-12-21 20:03:26
When faced with the same issue, we did as you mentioned: Load a super-light-weight page first with a tiny loading icon & "Loading..." text, then called back to the server to pull down the heavy content in chunks using ajax. 遇到相同的问题时，我们按照您提到的那样进行操作：首先加载一个超轻量页面，上面带有一个很小的加载图标和“ Loading ...”文本，然后调用返回服务器以分块地提取大量内容使用ajax。
If you content is really heavy, it's also worth mentioning that you need make sure you have gzip compression turned on at your web server layer also. 如果您的内容确实很繁重，那么还值得一提的是，您需要确保在Web服务器层也启用了gzip压缩。
解决方案2
1 2015-12-21 20:09:08
Don't block the rendering of the DOM. 不要阻止DOM的呈现。 Load the page and call your scripts right before the closing body tag and attach to an event like DOMContentLoaded or window.load (if you're using jQuery, that would be $(document).ready ). 加载页面并在结束body标记之前调用脚本，并附加到DOMContentLoaded或window.load类的事件（如果使用的是jQuery， $(document).ready ）。 In other words, you should allow the page to load completely, even if it's empty, before running any of your JavaScript. 换句话说，在运行任何JavaScript之前，即使页面为空，也应允许页面完全加载。
Then, don't worry about writing the "Loading" div dynamically. 然后，不必担心动态编写“ Loading” div。 Just include it in the rendered HTML and hide it initially. 只需将其包含在呈现的HTML中，并在最初将其隐藏即可。 The first thing your JavaScript will do, before issuing any AJAX calls, is to show this "Loading" div. 在发出任何AJAX调用之前，您的JavaScript要做的第一件事是显示此“正在加载” div。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.