$(document).readyとloadの違い

2023/10/27 19:36

このQ&Aのポイント

jQueryの「$(document).ready(function()」と「$(window).load(function()」は何が違うのでしょうか？
「$(document).ready(function()」は複数回実行できるが、「$(window).load(function()」は複数回実行できない。また、「$(document).ready(function()」はページを全て読み込んだ後に実行されるが、「$(window).load(function()」はページ読込開始時点で実行される。
「jQuery記述」と「JavaScriptだけで記述」とでは、内容やタイミングに違いはありません。どちらも同じと言えます。

ベストアンサー

$(document).readyとloadの違い

2013/07/08 21:15

■質問1 jQueryの「$(document).ready(function()」と「$(window).load(function()」は何が違うのでしょうか？下記理解で合ってるでしょうか？ ●$(document).ready(function() ・複数回実行できる・ページを全て読み込んだ後に実行・ページの下部に記述しなくとも良い ●$(window).load(function() ・複数回実行できない(最後の1回が実行される) ・ページ読込開始時点で実行(正確には記述位置に来た時点？) ■質問2 「jQuery記述」と「JavaScriptだけで記述」とでは、内容やタイミングに違いはありますか？・どちらも同じ？「$(window).load(function()」V.S「window.onload = function(){」

re97
お礼率80% (601/744)

JavaScript
回答数1
ありがとう数3

みんなの回答 （1）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

anmochi
ベストアンサー率65% (1332/2045)

2013/07/10 22:36 回答No.1

> ■質問1 > jQueryの「$(document).ready(function()」と「$(window).load(function()」は何が違うのでしょうか？ readyは「DOM要素の準備が完了した時」に呼び出される「jQueryイベント」であり、loadは生JavaScriptのonloadに相当する「Webブラウザ組み込みJavaScriptイベント」だ。 > ●$(document).ready(function() > ・複数回実行できるこれもjQuery独自のイベントなのでできる事だね > ・ページを全て読み込んだ後に実行 $(document).ready(function()の場合、documentのDOM要素が完了する（＝htmlの終了タグが読み込まれる）時に呼び出されるからページを全て読み込んだ後に実行しているように見えるのである。 > ・ページの下部に記述しなくとも良い > ●$(window).load(function() > ・複数回実行できない(最後の1回が実行される) こちらも冒頭の解説の通り、window.onload = function()を何回も行うので最後の1個が有効になるのだね。 > ・ページ読込開始時点で実行(正確には記述位置に来た時点？) いや、そんな事はない。window.onloadと同じタイミングというか登録した関数がwindows.onloadで呼び出される。なので、$("body").readyの後だ。ちなみに$("body").readyは$(document).readyよりも前に呼び出される（理由は「readyはDOMの準備が完了したら呼び出される」という意味を考えて欲しい）。 > ■質問2 > 「jQuery記述」と「JavaScriptだけで記述」とでは、内容やタイミングに違いはありますか？ > ・どちらも同じ？ > 「$(window).load(function()」V.S「window.onload = function(){」違う。前者はjQueryオブジェクトにラップされるが後者はされない。

質問者

お礼 2013/07/26 08:09

回答ありがとうございました。大変参考になりましたー

関連するQ&A

jQueryの $(function(){ });
jQueryについて基本的な質問をさせてください。基本的にjQueryは、お約束として $(document).ready(function(){ }); と記述し、その中に実行処理を書いていくと思うのですが loadを待たずに実行させたい時は $(document).ready(function(){ });は記述しなくてもよいのでしょうか？どの本をみてもjQueryのお約束事みたいに $(document).ready(function(){ });　を必ず書くと載っています。自分でやってみたところ、記述しないでも問題なく動いているのですが、やっぱり　$(document).ready(function(){ });　を記述しないと、何か問題があるのでしょうか？ご存知の方、教えてください。どうぞ宜しくお願いたします。
- ベストアンサー
- JavaScript
JQueryでのloadの動作がFirefoxで動かなくて困っています
JQueryでのloadの動作がFirefoxで動かなくて困っています。サイトのheaderとfooterを外部htmlにして、JQueryのloadで呼び出し指定のdivに出力するようにしたいのですが、IEでは上手くいきましたが、FFでは全く動きません。 $(document).ready(function(){ $("#header").load("../js/header.html #header"); $("#footer").load("../js/footer.html #footer"); });
- 締切済み
- AJAX
jQueryでloadしたページ内でもjQueryを使う方法
例えば、base.html内にjQueryでadd.htmlをloadします。 base.htmlに下記コードを記述 $(document).ready(function(){ 　$("a").click(function(){ 　　alert("click"); 　　return false; 　}); }); base.htmlに直接記述したaタグではアラートが出ますが、 base.htmlに読み込んだadd.html内のaタグでは適用されません。 Ajaxで読み込んだページ内にもjQueryを使用したい場合には、どのようにすればよいのでしょうか？
- 締切済み
- AJAX
親フレームのjQueryオブジェクトを使えるか？
html（親html）上に別のhtml（子html）を<iframe>で表示しています。親htmlではjQuery（v1.8.2）を使用しています。子htmlでもjQueryを使いたいです。単純に子htmlでjquery.jsを読み込めば良いですが、勉強のため以下のように親htmlのjQueryオブジェクトを使って実現してみました。【子htmlのscript】 var $ = parent.jQuery; $(window).load(function() { 　　$("body", document).append( "hoge" ); }); これで見た目は正しく動作してますが、以下の不明点が出てきたので質問させて下さい。【質問】 $(window).loadではなく$(document).readyを使った場合は"hoge"が追加されていませんでした。 <body>要素がまだ読み込めていないせいかとも思いましたが、documentの読み込み完了後に実行されているはずです。なぜ"hoge"が追加されないのでしょう？このdocumentは親htmlのdocumentなのでしょうか？ただ、$("body").append( "hoge" )と書いた場合は親htmlに"hoge"が追加され、$("body", document).append( "hoge" )と書くことで子htmlに"hoge"が追加されるようなので、親htmlのdocumentではない気がします。よろしくお願いします。
- 締切済み
- JavaScript
ページ読み込み時に自動でスクロール
<body>にonloadを記述する方法以外であるページを読み込んだ時に、自動的にページ最下部へスクロールさせたいのですが以下コードを記述してもエラーも起こらず、何も起きませんでした。 <script type="text/javascript" language="javascript">  </script> ちなみに、下側のalertは問題なく動作しております。 scrollby以外でのスクロールでもいいので、ご存じの方教えて下さい。（できれば一瞬でスクロールする方がいいです。）
- ベストアンサー
- JavaScript
onclickは良くないのですか
以前、こちらでJAVAScriptはonclickで動作すると教えて頂き、a タグにそのように記述しています。ところが、こちらのページでそれは宜しくないと記述されており、大変衝撃を受けています。 http://d.hatena.ne.jp/HolyGrail/20080515/1210861489 質問１ aタグのonclickはプロの方はほとんど使ってないといいます。やはり上記なような理由でよく使われてないのでしょうか。質問２ JQueryを使った次のコードが紹介されていました。どうもこれがベストな方法なようです。 $(document).ready(function(){ $('#clickevent').click(function(){ alert('clicked'); }); }) alertのところにonloadで実行する関数を置けばいいのかなと思います。ただ、aタグで指定している<img>の設定がよくわかりません。 aタグのname属性なんかでidを指定するのでしょうか？コードを変えてもいいのかすら検討ができていません。ご教授のほどをお願いします。
- ベストアンサー
- JavaScript
window.onloadでのfunction
javascript初心者で質問自身が僕が解決したい問題の原因かどうかも解らずに質問しています。 <script type="text/javascript">  </script> 上記のようにページheadにscriptを配置したとします。ページ上のbutton_1がクリックされると処理1が実行されるのですが、hoge_2のように引数を使ってしまうと、onload時に処理2を実行してしまい、button_2は有効に動作しません。 functionの引数の問題なのか、window.onloadの作法なのか、なにが悪いのか全く解らず質問しています。ご指導のほどよろしくお願いいたします。
- ベストアンサー
- JavaScript
jQueryのloadのcallbackが変な動作
jQueryのloadメソッドでCallBackが成功しているにも関わらず失敗する場合があります・・・対象方法が全くわからないのでご教示願えませんでしょうか？【A.html】 <script type="text/javascript" src="jquery-1.4.1.min.js"></script> <table> <tr> <td><div id = "target_1"><div id = "target_2"></td> </tr> </table> <script type="text/javascript"> $.ajaxSetup({ cache: false }); var xmlHttp; xmlHttp = new XMLHttpRequest(); xmlHttp.open("GET", "A.html", false); xmlHttp.send(null); alert(xmlHttp.responseText); $(document).ready(function(){ $("#target_1").load("a.txt .tag", function(Text, status) { if ($("#target_1").text() == "あああ") { $("#target_1").replaceWith("<img src = 'a.png'>"); else if ($("#target_1").text() == "いいい") $("#target_1").replaceWith("<img src = 'b.png'>"); alert( "text: " + Text + "\nstatus: " + status ); }); $(document).ready(function(){ $("#target_1").load("a.txt .tag", function(Text, status) { if ($("#target_1").text() == "あああ") { $("#target_2").load("a.txt .5tag");★ else if ($("#target_1").text() == "いいい") $("#target_2").load("a.txt .5tag");★ alert( "text: " + Text + "\nstatus: " + status ); }); }); 問題は★印が付いているところの処理です。アラートではSUCCESSになるのですが、なぜかロードが失敗する時があります。割合としては10回に1回程度で1回発生するとブラウザの再起動をしない限り二度とロードができなくなります。原因は何がいけないのでしょうか？
- ベストアンサー
- JavaScript
jQueryプラグインtubular使い方について
アメブロの背景全体にＹＯＵＴＵＢＥ動画を流したいのですがやり方がわかりません。 jQueryのダウンロードサイトで進んで行って、英語文字列のページ出てきてそれを名前を付けて保存。 jquery-tubularのjquery-tubular1.0.1ってやつも取り込みました。 <script> $(function(){ $('document').ready(function() { var options = { videoId: ''}; $('#window').tubular(options); }); }); </script> これにＹＯＵＴＵＢＥの動画ＩＤを''に入れました。それをプラグインのところに張り付けてみたんですが何も起こりません。サイトで載っている、「先にjQuery本体を、続いてダウンロードしてきた jQuery Tubularを読み込み」っていう部分も意味が分かりません。どなたかやり方を教えてください・・　よろしくお願いします。
- ベストアンサー
- その他([技術者向] コンピューター)
無限ループ
教えてください。画面をリサイズすると画面再表示するようにしたいのですが、下記のソースでは IE8で無限ループになります。どこがおかしいのでしょうか？どのように直せばいいのでしょうか？ jQuery(document).ready(function () { var timer = false; $(window).on("load resize", ReLayout); function ReLayout(event) { var _width = $(window).width(); var winWidth_resized; if(event.type == 'resize') { if (_width > 767) { if (timer !== false) { clearTimeout(timer); } timer = setTimeout( disp, 200); } } } function disp(){ location.href = location.href; } });
- ベストアンサー
- JavaScript