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

Question

我面临一个概念性问题。
在网站的开头，我有一个OPENING ANIMATION （以装载程序的形式表示），我想从头到尾展示所有内容。 然后，当页面完全加载后，我将显示该页面。

现在有两种不同的情况：

• 首先：快速上网->在动画结束之前加载页面
• 第二：缓慢的互联网->加载结束前的开放完成

我要实现的是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 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();
  }
}