Question

我有一个固定的div具有坚实的背景和一些文本，我用作加载屏幕，当页面通过$（window）.load完全加载时淡出。因为有关于装载机的实际信息，它需要在淡出之前保持最少的时间。但是，如果页面加载速度超过最短时间，我不希望它提前消失，并且我也不希望它在网站加载后保持超过最短时间，并且这是我难倒的地方。

逻辑上它需要像这样运行： - 淡入，等待5秒页面加载 - 如果超过5秒，立即淡出 - 等待剩余的时间，然后淡出（换句话说，在上传后5秒钟不开始计数）

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

这是几年前在这里提出的，但没有正确答案：jQuery loading screen with minimum viewing time

更愿意坚持使用JS / jQuery＆amp; 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'))

所以 - 为了简化，我们只关心页面是否已加载，并且已经过了五秒钟。因此，如果在这两个事件中，我们检查另一个事件是否已经发生，我们知道它将在五秒钟（如果页面已加载）或页面加载时触发（如果已经过了五秒）。

Answer 2

https://jsfiddle.net/4k7uxdxz/

使用CSS来处理动画。这将确保动画在页面打开后立即生效，并且需要5秒才能淡入。

.opener {
  opacity: 0;
  background-color: rgb(0, 0, 0);
  color: white;
  text-align: center;
  font-size: 30px;
  animation: fadeIn 5s forwards;
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

当DOM准备就绪时，只需将动画更改为淡出

$(document).ready( function() {
  $(".opener").on("animationend", () => {
    $(".opener").css("animation", "fadeOut 5s forwards")
  });
});

最小显示时间的加载屏幕

2 个答案: