問題 × 解決策

ページの読み込み後にjavascript、jQueryで処理を行う記述例

問題

ページの読み込み後にjavascript、jQueryで処理を行う方法にはどんな種類がある?

解決策

  • window.load = function(){ … }
  • $(window).load(function(){ … })
  • document.addEventListener('DOMContentLoaded', function(){ … })
  • $('document').ready(function(){ … })
  • $(function(){ … })

 

処理が行われるタイミング

ページの読み込み後にjavascript、jQueryの処理を行う際、記述の仕方によって処理が行われるタイミングが変わってきます。
今回はページの読み込み後にjavascript、jQueryで処理を行う記述例をご紹介します。

全てのデータの読み込みが完了した後に処理を行いたい場合

全てのデータの読み込みが完了した後に処理を行いたい場合は、以下の記述で処理を構築します。

javascriptの場合 …
「window.load = function(){ … }」

window.load = function({
	// 全てのデータの読み込みが完了した後の処理
});

jQueryの場合 …
「$(window).load(function(){ … })」

$(window).load(function() {
	// 全てのデータの読み込みが完了した後の処理
});

DOMツリーの構築が終わった時点で処理を行いたい場合

DOMツリーの構築が終わった時点で処理を行いたい場合は、以下の記述で処理を構築します。

javascriptの場合 …
「document.addEventListener(‘DOMContentLoaded’, function(){ … })」

document.addEventListener('DOMContentLoaded', function(){
	// DOMツリーの構築が終わった時点で行われる処理
});

jQueryの場合 …
「$(‘document’).ready(function(){ … })」
「$(function(){ … })」

「$(function(){ … })」は「$(‘document’).ready(function(){ … })」の省略形なため、意味は同じとなります。

$('document').ready(function(){
	// DOMツリーの構築が終わった時点で行われる処理
});
$(function(){
	// DOMツリーの構築が終わった時点で行われる処理
});

参照

以下のサイトが、より詳しく解説してくれています。

【window.onloadとjQueryの$(document).ready等の比較】
https://rcmdnk.com/blog/2015/07/11/computer-javascript-jquery/

コメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

twelve − 8 =

「問題 × 解決策」
月別アーカイブ一覧

「問題 × 解決策」
月別アーカイブ一覧