javascript - 检查页面何时加载以及打开动画何时完成

Question

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

现在有两种不同的情况:

• 第一:快速互联网 -> 页面在动画结束之前加载
• 第二:网速慢 -> 在加载结束之前打开完成

我想要实现的是显示整个开头，然后如果页面已加载，则关闭开头/加载器，或者如果页面未加载加载完毕等待加载结束关闭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();
  }
}