ページが読み込まれるまでページの読み込み div を表示するにはどうすればよいですか?

ページの読み込み中に画面全体が白または黒になる代わりに、読み込みインジケーターが表示されるため、アプリケーションのユーザー エクスペリエンスも向上します。

現在、読み込みインジケーターを表示できるライブラリがいくつかあります。ただし、HTML と CSS を使用してカスタムの読み込みインジケーター div を作成できます。

このチュートリアルでは、HTML、CSS、および JavaScript を使用して、ページが読み込まれるまでページ読み込み div を表示します

onreadystatechange イベントを使用して、ページの読み込み時に読み込みインジケーターを表示します

JavaScript では、Web ページのステータスが変化するたびに、onreadystatechange イベントがトリガーされます。最初の状態は「対話型」です。これは、Web ページが対話中であり、読み込みが開始されていることを意味します。第 2 段階は「完了」、つまり Web ページが正常に読み込まれたことです。

したがって、他のすべての状態では本文を非表示にして読み込みインジケーターを表示できます。また、「完了」状態では読み込みインジケーターを非表示にして本文を表示できます。

＃＃＃文法＃＃＃

ユーザーは、次の構文に従って、ドキュメントのステータスに基づいて読み込みインジケーターを表示または非表示にすることができます。

リーリー

上記の構文では、ドキュメントのステータスが変化するたびにこの関数を呼び出します。ステータスが「完了」かどうかを確認し、読み込みインジケーターを非表示にして本文を表示します。

＃＃＃例＃＃＃

以下の例では、「loading_indicator」div を使用して div を作成し、CSS を適用して循環読み込みインジケーターにしています。

JavaScript では、onreadystatechange イベントを使用します。この関数は状態が変化するたびに実行されます。関数内では、ドキュメントの「readyState」プロパティを使用してドキュメントの現在の状態を取得します。ドキュメントの現在のステータスが「完了」の場合、読み込みインジケーターにアクセスして非表示にし、ドキュメント本文全体を表示できます。それ以外の場合は、読み込みインジケーターを表示し、ドキュメント本文を非表示にすることができます。

リーリー ＃＃＃例＃＃＃

以下の例では、jQuery を使用して、ページの読み込み時に読み込みインジケーターを表示します。ドキュメント本文に HTML と CSS を追加しました。

JQuery では、append() メソッドを使用して、読み込みインジケーターをドキュメント本文に追加します。その後、「load」イベントを使用してページが読み込まれたかどうかを確認し、それに基づいて Web ページから読み込みインジケーターを削除します。

リーリー

JavaScript と jQuery を使用して、ページの読み込み時に読み込みインジケーターを表示する方法を学びました。最初の例では、JavaScript の onreadystatechange イベントを使用して、ページが読み込まれているかどうかに基づいて読み込みインジケーターを表示または非表示にします。

2 番目の例では、JQuery の読み込みイベントを使用して読み込みインジケーターの表示と非表示を切り替えます。

以上がページが読み込まれるまでページの読み込み div を表示するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。