0

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

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

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

我想避免的问题是为我的用户显示一个“加载”模式，该模式会在最适合他们的眼睛之前停留 2/3 秒，即使应用程序在 2/3 秒延迟后 1/2 秒准备好也是如此。

有行之有效的方法吗？

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

4

2 回答 2

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;
}
于 2013-05-29T14:05:16.740 回答
0

您可以使用设置超时功能

setTimeout(function() {
      // your image to be displayed after particular seconds
}, 2000);
于 2013-05-29T13:46:30.503 回答