如何在網頁加載時顯示加載內容，並在頁面完全加載時隱藏該內容？

Question

我使用CSS和JS / JQuery制作了不錯的加載動畫。 它具有一條白線，變成一個彩色圓圈。 它在單獨的html中工作得很好，但是現在我想將其包含在我的網頁中。 有一個鏈接到HTML的通用腳本叫script.js。 用於制作動畫的腳本稱為animation.js。 到目前為止，這是我的代碼：

<div class="loading">
    <div id="colouredCircle">
        <div id="whiteCircle"></div>
        <div id="line"></div>
    </div>
</div>
<script src="animation/animaton.js"></script>
<div class="contents">
    ...
</div>

我想顯示div.loading，而文檔仍在加載。 當文檔完全加載后，我想隱藏該div.loading，並顯示我的HTML頁面的實際內容（div.contents）。 有人知道如何執行此操作嗎？ 我是JS / JQuery的新手。

Answer 1

嘗試使用此腳本。 在此javascript中，您的模板在加載時會附加到正文中。 之后，將其從身體上移除

 var tmpl = '<div id="loading" class="loading">' + ' <div id="colouredCircle">' + '<div id="whiteCircle"></div>' + '<div id="line"></div>' + '</div>' + '</div>'; var loading = { start: function() { document.body.insertAdjacentHTML('beforeend', tmpl); }, complete: function() { var loading = document.getElementById("loading"); loading.remove(loading); } }; loading.start(); document.addEventListener("readystatechange", function() { if (document.readyState === "complete") { loading.complete(); } });