ウェブページの読み込み中に読み込みコンテンツを表示するにはどうすればいいですか？

Question

私は、CSSとJS/JQueryで素晴らしい読み込みアニメーションを作成しました。白い線が色のついた円に変わります。それは、別々のHTMLで完璧に動作しますが、今私は自分のWebページにそれを含めたいと思います。 script.jsというHTMLにリンクされた一般的なスクリプトがあります。アニメーションを作成するためのスクリプトは、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(); 
 
    } 
 
});

から削除します