Question

我面临一个概念问题。
在我的网站的开头，我有一个OPENING ANIMATION（在加载程序中）我想要显示所有内容，从开头到结尾，当然。然后，当页面完全加载时，我将显示页面。

现在有两种不同的情况：

第一：快速上网 - ＆gt;在动画结束之前加载页面
第二：慢速互联网 - ＆gt;装货结束前的开幕式

我想要实现的是show the entire opening然后IF the page is loaded close the opening/loader，或IF the page is not loaded wait until the end of the loading to close the opening/loader。

我想使用$(windows).load("close loader")但是如果加载速度很快，加载器将在动画结束前关闭。

我做了什么

$(window).load(function(){
        if( done ){
            console.log("bar done");
            $("#openingLoader").addClass("done");
        }
        done = true;
    });

以及开幕动画的回电

if( done ){
        console.log("opening done");
        $("#openingLoader").addClass("done");
        }
done = true;

但我认为这不是解决问题的好方法。有什么想法吗？

Answer 1

您的问题显然有两个条件，但每个尝试过的解决方案只有一个条件。

当动画完成或页面加载时，设置回调到页面加载功能。页面加载功能需要检查是否满足两个条件，如果满足，则打开页面。

伪代码：

animationFinishedCallback = function(){
  animationFinished = true;
  tryPageOpen();
}
pageLoadedCallback = function(){
  pageLoaded = true;
  tryPageOpen();
}

function tryPageOpen() {
  if (animationFinished && pageLoaded) {
     openPage();
  }
}

检查页面何时加载并且打开动画已完成

我做了什么

1 个答案: