HOWTO · jQuery
jQuery でページ上の読み込みイベントを作成する
このチュートリアルでは、jQuery でページ上の読み込みイベントを作成する方法を示します。
このページの内容
load イベントを伴うメソッド on() は、jQuery でページ上のロードイベントを作成するために使用されます。このチュートリアルでは、jQuery でページ上の読み込みイベントを作成する方法を示します。
jQuery でページ上の読み込みイベントを作成する
以前、jQuery にはページ上のロードまたは document.ready イベントとして機能する関数 load() がありましたが、このメソッドは jQuery バージョン 1.8 で非推奨になり、バージョン 3.0 で削除されました。これで、メソッド on() を load イベントとともに使用して、ページが完全にロードされたら操作を実行できます。
load イベントを伴う on() メソッドは、スタイルシート、画像、ビデオなど、すべてがページにロードされたときに機能します。
on() メソッドの構文は次のとおりです。
$(window).on('load', functionforOnPageLoad() )
ページが完全に読み込まれたときに関数が呼び出される場所。例を試してみましょう：
<!DOCTYPE html>
<html>
<head>
<title> jQuery On Page Load </title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"> </script>
</head>
<body>
<script type="text/javascript">
$(window).on('load', AlertMessage());
function AlertMessage() {
alert("Hello This is Page is fully loaded");
}
</script>
</body>
</html>
上記のコードは、ページが完全に読み込まれたときにメッセージを警告します。出力を参照してください：
別の例を試して、ページが完全に読み込まれた後の現在の時刻を表示してみましょう。例を参照してください：
<!DOCTYPE html>
<html>
<head>
<title> jQuery On Page Load </title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"> </script>
</head>
<body>
<p> The current Time is: </p>
<span class="date"></span>
<script type="text/javascript">
$(window).on('load', ShowCurrentTime());
function ShowCurrentTime() {
document.querySelector("span").textContent = new Date();
}
</script>
</body>
</html>
上記のコードは、ページが完全に読み込まれると現在の時刻を示します。出力を参照してください：
