ウェブページの読み込み進捗状況バーの詳細な説明（推奨）

(Web ページの読み込み中に、コンテンツが多すぎて読み込みと待機が続くことがあります。このとき、Web ページは白く表示され、何も表示されないため、ユーザーに非常に悪いエクスペリエンスを与えます。そのため、通常、Web ページが正常に読み込まれる前に、進行状況バーの形でユーザーに表示されます。ユーザーにアニメーションを見せて、Web ページが読み込まれていることを知らせます)

一般的な方法は次のとおりです。

1. タイマー進捗バー（偽物）

<script type="text/javascript"> 
    $(関数(){ 
        var loading='<div class="loading"><div class="pic"></div></div>'; 
        $("body").append(読み込み中); 
        setInterval(関数(){ 
            $(".loading").fadeOut(); 
        },3000); 
    }); 
</スクリプト>

2. 実際にコンテンツを取得し、読み込み進捗バーを確認する

実際のコンテンツに応じてプログレスバーを読み込むには、次の 2 つの知識ポイントを導入します。

document.onreadystatechange ページの読み込み状態が変わったときのイベント
document.readyStateは現在のドキュメントのステータスを返します
1. 初期化されていない - まだロードされていない
2. 読み込み
3. インタラクティブ - 読み込まれると、ドキュメントとユーザーが対話を開始できます。
4. 完了 - 読み込みが完了しました

2.1. 上記のタイマー コードは次のように変更できます。

document.onreadystatechange=関数(){ 
         document.readyState=="完了"の場合{ 
                  $(".loading").fadeOut(); 
         } 
}

2.2. プログレスバーを小さなCSSアニメーションにして表示する

推奨ウェブサイト: https://preloaders.net/ このウェブサイトには、読み込み中を示すさまざまな小さなアニメーションがあります

http://autoprefixer.github.io/ CSS にオンラインでプレフィックスを追加する

https://loading.io/ プログレスバーアニメーション

2.3: ヘッドの進行方向を下図のように配置します。

注: この実装では、実際には読み込みの進行状況は表示されませんが、上から下にコードを実行するという原則を使用して、コード内のさまざまな場所で線の幅を変更し、ページの最後で幅を 100% にします。

以下のように表示されます。

2.4 リアルタイムでデータの読み込みの進行状況バーを取得する

画像オブジェクトを作成します: image object name = new Image();
onload イベントを使用します。注意: src 属性は onload の後に記述する必要があります。そうしないと、プログラムは IE で失敗します。

上記はこの記事の全内容です。この記事の内容が皆さんの勉強や仕事に少しでもお役に立てれば幸いです。ご質問があれば、メッセージを残してご連絡ください。123WORDPRESS.COM をご愛顧いただき、ありがとうございます。