Wie kann ich den Lade-Inhalt anzeigen, während meine Webseite geladen wird, und den Inhalt ausblenden, wenn die Seite vollständig geladen ist?

Question

Ich habe eine schöne Lade-Animation mit CSS und JS/JQuery gemacht. Es hat eine weiße Linie, die sich in einen farbigen Kreis verwandelt. Es funktioniert perfekt in einem separaten HTML, aber jetzt möchte ich es auf meiner Webseite hinzufügen. Es gibt ein allgemeines Skript, das mit dem HTML-Code script.js verknüpft ist. Das Skript zum Erstellen der Animation heißt animation.js. Das ist mein Code so weit:

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

Ich möchte das div.loading zeigen, während das Dokument noch geladen wird. Wenn das Dokument vollständig geladen ist, möchte ich das div.loading ausblenden und den tatsächlichen Inhalt meiner HTML-Seite anzeigen (div.contents). Wer hat eine Idee, wie man das macht? Ich bin neu bei JS/JQuery.

Answer 1

Versuchen Sie, dieses Skript zu verwenden. In diesem Javascript wird Ihre Vorlage beim Laden an den Körper angehängt. danach ist es

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

aus dem Körper entfernen