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

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:

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

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.

我想显示div.loading,而文档仍在加载。当文档完全加载时,我想隐藏div.loading,并显示我的HTML页面的实际内容(div.contents)。任何人都知道如何做到这一点?我是JS / JQuery的新手。

1 个解决方案

#1

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

尝试使用此脚本。在这个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();
  }
});