如何將加載頁面的計時器延長到3秒？

Question

我想為我的網站添加一個加載程序，但是我現在遇到的問題是，加載程序的結束時間約為0.1秒，因為我的網站加載后可以快速看到該加載程序。

所以我的問題是：如何在加載程序進入我的網站之前對其進行展示？ 我想做一個2-3秒的加載動畫，然后轉到我的網站。

<script>
window.addEventListener("load", function(){
    var load_screen = document.getElementById("load_screen");
    document.body.removeChild(load_screen);
});
</script>

Answer 1

將您的代碼放入setTimeout回調中。

window.addEventListener("load", function(){
    setTimeout(() => {
      // Your code here...
    }, 3000);
});

Answer 2

您可以使用以下JavaScript的setTimeout函數作為代碼

setTimeout(function(){
  var load_screen = document.getElementById("load_screen");
  document.body.removeChild(load_screen);
},3000)

上面的代碼應該是窗口的加載事件

Answer 3

嘗試這個。 您可以添加DOMContentLoaded以確保頁面加載完成，並使用計時器延遲添加setTimeout。

 document.addEventListener("DOMContentLoaded", () => { let overlay = document.getElementsByClassName("overlay")[0]; let loading = document.getElementsByClassName("loading")[0]; setTimeout(() => { loading.remove(); overlay.classList.add("loaded"); }, 3000); }); 

 .overlay { opacity: 0; transition: opacity 200ms ease-out; } .overlay.loaded { opacity: 1; } 

 <div class="overlay"> The page content. </div> <div class="loading"> Page is loading </div>