javascript - 以最短显示时间加载屏幕

Question

我有一个带有纯色背景的固定 div 和一些我用作加载屏幕的文本，当通过 $(window).load 完全加载页面时，这些文本会淡出。问题在于加载器上有实际信息，它需要在淡出之前启动最短时间。但是，如果页面加载速度快于该最短时间，我不希望它过早消失，而且我也不希望它在网站加载后也停留在最短时间之后，这是我被难住了。

逻辑上需要这样操作: - 淡入，等待 5 秒 -页面加载 -如果 5 秒过去了，立即淡出 -else 仅等待剩余时间，然后淡出(换句话说，不要在加载后 5 秒开始计数)

我通常只有一个更容易立即显示的加载器，然后我添加类以在加载后通过不透明度的 CSS 转换隐藏它，但是因为我需要淡入淡出然后淡出加载文本并且还保持最短时间而不只是添加它作为加载后的延迟，这有点棘手。

几年前有人在这里问过这个问题，但没有正确的答案:jQuery loading screen with minimum viewing time

宁愿坚持使用 JS/jQuery 和 CSS。任何帮助将不胜感激，谢谢!

Answer 1

只要设置一个timeout 五秒，检查窗口是否加载，如果是，隐藏它。

加载时，检查是否已过五秒，如果已过，则将其隐藏。

我会这样做:

var loader = (function(window, $loadingScreen) {

    var elapsed = false;
    var loaded = false;

    setTimeout(function() {
        elapsed = true;
        if (loaded)
            hideLoadingScreen();
    }, 5000);

    var hideLoadingScreen = function() {
        //do whatever
    }

    $(window).on('load', function() {
        if (elapsed) {
            hideLoadingScreen();
        }
    });
}(window, $('#loader'))

因此 - 为简化起见，我们只关心页面是否已加载，以及是否已过去 5 秒。因此，如果在这两个事件中，我们检查另一个事件是否已经发生，我们知道它将在五秒(如果页面已加载)或页面加载时(如果已过五秒)触发。