具有超时功能的装载预加载器上

Question

我做了很多研究，但没有找到任何解决方案。我有一个带有沉重图像滑块的页面，底部还有很多文本。文本以及即将加载的其他一些浅色图像非常重要。末尾的图像滑块导致页面延迟，据我所知。

当前代码

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

当我的加载时间短且连接良好时，这种情况很好用。但是当连接变慢时，由于最后使用图像滑块，因此加载时间会增加。

我想要实现的是：

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

我不希望为每次加载页面都设置n秒的固定计时器。

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

PS：我是js的新手，但我了解脚本的一般概念。

请帮助，谢谢。

Answer 1

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

如果预紧器赢得比赛，则显示出来。

如果页面在比赛中获胜，则永远不会显示预加载器，而直接显示图像滑块。

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