Question

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

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

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

我想避免的问题是，为我的用户显示“加载”模式，即使应用程序在2/3之后的1/2秒准备好，也会在最佳状态之前停留2/3秒秒延迟。

有没有经过验证的方法可以做到这一点？

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

Answer 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;
}

Answer 2

您可以使用设置超时功能

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

如果只需要超过2秒钟，如何显示“加载页面”？

2 个答案: