带超时功能的加载预加载器

Question

我已经研究了很多，但没有找到任何解决方案。 我有一个页面，底部有大量图片滑块，里面也有很多文字。 文本与其他一些即将加载的浅色图像一起很重要。 最后的图像滑块导致页面延迟，我理解它会。

当前代码

  $(window).on('load', function () {
    $('.preloader').fadeOut(300);
  });

当我有一个快速的加载时间和良好的连接时，这种情况很有效。 但是当连接变慢时，由于最终的图像滑块，加载时间会增加。

我想要实现的是：

• 情况 A：当连接良好时页面加载迅速。
• 情况 B：作为故障安全措施，如果页面未完全加载，则预加载器超时 4 秒

我不希望每个页面加载都有一个固定的 n 秒计时器。

• 如果页面加载速度快：没有预加载器。
• 如果页面在 3 秒内加载：3 秒预加载器
• 如果页面在 8 秒内加载：预加载 4 秒，然后显示呈现的内容。

PS：我对js很陌生，但我了解脚本的一般概念。

请帮忙，谢谢。

Answer 1

您可以通过配置预加载器和页面加载之间的竞争来解决这个问题。

如果预加载器赢得比赛，则显示它。

如果页面赢得比赛，则永远不会显示预加载器并直接显示图像滑块。

但是，一种解决方案可能是在所有情况下都显示非侵入式预加载器，如果页面加载速度很快，那么用户可能永远不会看到它。