jQueryの「$(document).ready(function()」と「$(window).load(function()」には、違いがあります。
$(document).ready(function(){}) の省略系として、$(function(){})と言う書き方もあります。
順序でいえば、$(document).ready() が先に実行されて、$(window).load() の方が後に実行される事になります。
ready()は「jQueryイベント」であり、loadは生JavaScriptの「JavaScriptイベント」であり、
ready()は「DOM要素の準備が完了した時」に呼び出され、loadは「onloadに相当する」みたいです。
DOMは「Document Object Model」の略語です。xmlやhtmlの各要素、たとえば<p>とか<img>とかの種類の要素にアクセスする仕組みのことです。
ready()メソッド DOMツリーの構築が完了した時点で処理を実行する。$(document).ready(function()の場合、documentのDOM要素が完了する(=htmlの終了タグが読み込まれる)時に呼び出されます。$(“body”).readyだと、bodyタグが終わったら実行されます。
load()メソッド(onloadイベント) DOMツリーの構築だけでなく、画像などの関連データの読み込みが完了しないと処理されません。 window.onload = function() 最後の記述のみ実行されます。
今回使用したjquery.min.jsは、ver2.0.3です。
↓以下が実験のソースサンプルです。
▼JavaScript
<script type="text/javascript" src="jquery.min.js"></script>
▼HTML
<br /> <script type="text/javascript">// <![CDATA[ $(window).load( function() { alert('load1') }); $(window).load( function() { alert('load2') }); window.onload = function(){alert('onload function');} $(document).ready( function(){alert('ready');}); $(function(){alert('function');}); // ]]></script> <br />
今回、参考にさせていただいたのは、
『$(document).ready() と $(window).load() の違い』です。
ありがとうございます。