ページが最初の要素を読み込むまでローディングアイコンを表示

Question

私はモバイルサイトを持っています。そのためにユーザーがリンクをクリックしたときにローディングアイコンを追加しようとしていました。まともなチュートリアルが見つかりました - Check it here

私はこれを使用しましたが、問題があります。ページが完全に読み込まれるまで、ロードアイコンが表示されます。しかし、接続が遅い場合は時間がかかることがあります。私が必要とするのは、ページが最初のコンテンツをロードするとき、または少なくとも何かを表示するときにローディングアイコンを表示するのをやめ、ユーザーが長い時間待たなくても、部分的にロードされている間にページのチェックを開始できるようにすることです。私はそれをどうすればいいのか分かりません。どんな助けもありがとう。 これは私が使っていたコードである -

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
    <script type="text/javascript"> 
    $(window).load(function() { 
     $(".loader").fadeOut("slow"); 
    }) 
    </script> 
<div class="loader"></div> 

.loader { 
    position: fixed; 
    left: 0px; 
    top: 0px; 
    width: 100%; 
    height: 100%; 
    z-index: 9999; 
    background: url('images/page-loader.gif') 50% 50% no-repeat rgb(249,249,249); 
} 

Answer 1

代わりにonloadイベントの

document.addEventListener( "DOMContentLoaded", ready, false ); 
function ready(){ 
alert("page initialised"); 
} 

使用DOMContentLoaded ...