問題
ページの読み込み後に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/
コメント