Web ページの読み込みプログレスバーを実装するためのコード共有

この記事では、Web ページの読み込みプログレス バーを中心に説明します。具体的な操作手順については、以下の詳細な説明を参照してください。

(Web ページの読み込み中、コンテンツが多すぎることがあり、ページが読み込みを待機し続けることがあります。このとき、Web ページは白く表示され、何も表示されず、ユーザーに非常に悪い経験を与えます。そのため、通常、Web ページが正常に読み込まれる前に、進行状況バーがユーザーに表示され、ユーザーはアニメーションを確認して Web ページが読み込まれていることを確認できます。

一般的なメソッドは次のとおりです。

1. タイマープログレスバー（フェイク）

<script type="text/javascript"> 
    $(function(){ 
        var loading=‘<p class="loading"><p class="pic"></p></p>‘; 
        $("body").append(loading); 
        setInterval(function(){ 
            $(".loading").fadeOut(); 
        },3000); 
    }); 
</script>

2. 実際にコンテンツを取得し、ローディングプログレスバーを実現します 内容については、以下の 2 つの知識ポイントを紹介します:

document.onreadystatechange ページの読み込みステータス 変更時のイベント

1. 未初期化 - 読み込みがまだ開始されていません
2. 読み込み中
3. . インタラクティブ - ロードされ、ドキュメントとユーザーの対話を開始できます
4. 完了 - ロードが完了しました

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

http://autoprefixer.github.io/ オンラインで CSS に接頭辞を追加します

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

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

画像オブジェクトを作成します: Image object name = new Image();

注: src onload 属性を後ろに記述する必要があります。そうしないと、IE でプログラムが正しく動作しません

以上がWeb ページの読み込みプログレスバーを実装するためのコード共有の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。