如何仅在需要超过 2 秒的情况下才显示“加载页面”？答案

【问题标题】：How to display a "Loading page" only if it will takes more than 2 seconds?如何仅在需要超过 2 秒的情况下才显示“加载页面”？
【发布时间】：2018-09-25 17:07:40
【问题描述】：

我面临一个基于用户体验的非常奇怪的问题。

我的项目是一个单页完整的 JavaScript 应用程序。我决定显示一个“正在加载页面”模式，但在本地，这显示为 Flash，因为应用程序加载速度很快。

最好的是，如果应用程序的加载时间超过 2 秒，它会显示它（理想情况下，在加载开始时，可能通过计算加载量和传输速度？），如果显示，则至少停留 2/3 秒（以避免快速显示/隐藏的闪烁）。

我想避免的问题是，即使应用在 2/3 后 1/2 秒准备就绪，在最适合他们的眼睛之前保持 2/3 秒的“加载”模式会显示给我的用户秒延迟。

有行之有效的方法吗？

注意：我看到了this post，这是一个好的开始，但并不能完全解决我的问题（可以制作显示/隐藏闪光灯）。

【问题讨论】：

再次告诉我设置 2 秒超时以显示加载模式有什么问题（当然在 if 中检查页面是否已加载）？您是否担心在 2.5 秒页面加载的情况下，此模式仅显示 0.5 秒？
是的，这正是为什么:)

标签： javascript user-experience

【解决方案1】：

我认为您尝试计算估计的加载持续时间对您不利。因此，我的建议是每次加载页面时都显示该模式，并在加载过程完成后立即隐藏它。这样一来，就不需要超时或类似的事情了。

但如果您必须确保模态显示至少 3 秒，您可以执行以下操作（但我个人不太喜欢让用户等待的时间超过他必须等待的时间）：

//entry point (first script to run, ideally put in the <head> tag)
var initFinished = false,
    canHideModal = false;

setTimeout(function(){
   if (initFinished === true) {
       //hide modal
   } 
   canHideModal = true;
}, 3000);


//initialization stuff / page load / dom

document.addEventListener("DOMContentLoaded", init, false);

function init() {

   //...more init stuff

   //at this point everything is loaded
   if (canHideModal === true) {
       //hideModel
   }
   initFinished = true;
}

【讨论】：

【解决方案2】：

你可以使用设置超时功能

setTimeout(function() {
      // your image to be displayed after particular seconds
}, 2000);

【讨论】：