如何在网页加载时显示加载内容，并在页面完全加载时隐藏该内容？

Question

I made a nice loading animation with CSS and JS/JQuery. It features a white line turning around into a coloured circle. It works perfectly fine in a seperated html, but now i wanna include it on my webpage. There is a general script linked to the HTML called script.js. The script for making the animation work is called animation.js. This is my code so far:

<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>

I want to show the div.loading, while the document is still loading. When the document is fully loaded, i want to hide that div.loading, and show the actual content of my HTML page (div.contents). Anyone any idea how to do this? I'm kinda new to JS/JQuery.

Answer 1

Try to use this script. In this javascript your template append to body while loading. after that it's remove from body

 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(); } });