javascript - ページの読み込み状況

Question

ブラウザがページをどこまでロードしたかを知る方法はありますか?

JavaScript またはブラウザのネイティブ関数を使用します。

ページのステータスに基づいて、進行状況バーを作成したいと考えています。

Answer 1

これが機能するかどうかは100％確信が持てませんが、理論は次のとおりです。

まず第一に、ページが読み込まれるまで JavaScript の実行を停止しないでください。つまり、window.ready document.ready などは使用しないでください。

ページの上部で、loaded などと呼ばれる JavaScript 変数を初期化し、0 に設定します。

var loaded = 0;

ページ全体を通して、正しいパーセンテージであると見なされるさまざまなポイントでロードされたインクリメント。

たとえば、ページの半分がコード セットに読み込まれたと考えた場合などですloaded = 50;。

等..

何度も言いますが、これはあくまでも概念です。

Answer 2

コード：

function request() {
    showLoading(); //calls a function which displays the loading message

    myRequest = GetXmlHttpObject();
    url = 'path/to/script.php';
    myRequest.open('GET',url,true);
    myRequest.onreadystatechange = function() {
        if(myRequest.readyState == 4 && myRequest.status == 200) {
            clearLoading(); //calls a function which removes the loading message

            //show the response by, e.g. populating a div
            //with the response received from the server
        }
    }
    myRequest.send(null);
}

リクエストの最初に、showLoading()Javascript を使用してあなたのpreLoaderDiv. 次に、応答が受信clearLoading()されると、あなたの に相当するものを動的に削除するを呼び出しますpreLoaderDiv。

Answer 3

自分で決定する必要があり、そのためには決定する方法が必要です。1 つの可能性は、ページに沿ってダミー要素を配置し、それらの合計を把握し、各ポイントで既に存在する数をカウントすることです。しかし、それは取得された DOM の量を与えるだけであり、ロード時間のごく一部である可能性があります。ほとんどの場合、ブラウザはスクリプトと画像を待ってアイドル状態になっています。