帶超時功能的加載預加載器

Question

我已經研究了很多，但沒有找到任何解決方案。 我有一個頁面，底部有大量圖片滑塊，里面也有很多文字。 文本與其他一些即將加載的淺色圖像一起很重要。 最后的圖像滑塊導致頁面延遲，我理解它會。

當前代碼

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

當我有一個快速的加載時間和良好的連接時，這種情況很有效。 但是當連接變慢時，由於最終的圖像滑塊，加載時間會增加。

我想要實現的是：

• 情況 A：當連接良好時頁面加載迅速。
• 情況 B：作為故障安全措施，如果頁面未完全加載，則預加載器超時 4 秒

我不希望每個頁面加載都有一個固定的 n 秒計時器。

• 如果頁面加載速度快：沒有預加載器。
• 如果頁面在 3 秒內加載：3 秒預加載器
• 如果頁面在 8 秒內加載：預加載 4 秒，然后顯示呈現的內容。

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

請幫忙，謝謝。

Answer 1

您可以通過配置預加載器和頁面加載之間的競爭來解決這個問題。

如果預加載器贏得比賽，則顯示它。

如果頁面贏得比賽，則永遠不會顯示預加載器並直接顯示圖像滑塊。

但是，一種解決方案可能是在所有情況下都顯示非侵入式預加載器，如果頁面加載速度很快，那么用戶可能永遠不會看到它。