jQueryを利用しない実装方法はこちらの記事を参照してください。
jQuery でページの表示時にjavascriptを実行するコードと実行結果を紹介します。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script type="text/javascript" src="jquery-2.0.3.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function () {
alert("Helo jQuery World!");
})
</script>
テストページ
</body>
</html>
jQueryでは
$(document).ready(function () {
(実行するjavascript....)
})
と記述するとページ表示時にブロック内のjavascriptを実行できます。
また、コードの実行タイミングはページの読み込み直後になります。
上記のHTMLファイルを表示すると下図の結果となります。javascriptが実行され、アラートダイアログが表示されます。
以下のコードでも同様の動作となります。
readyはページのDOMツリーの構築が完了した時点でイベントが発生します。一方loadDOMツリーの構築が完了し、画像などのファイルの読み込みがすべて完了した時点でイベントが発生します。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script type="text/javascript" src="jquery-2.0.3.js"></script>
</head>
<body>
<script type="text/javascript">
$(window).load(function(){
alert("Helo jQuery World!");
})
</script>
テストページ
</body>
</html>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script type="text/javascript" src="jquery-2.0.3.js"></script>
</head>
<body>
<script type="text/javascript">
$(window).on('load',function(){
alert("Helo jQuery World!");
})
</script>
テストページ
</body>
</html>
