jQueryの「ready」とJavaScriptの「load」の違いについて

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() の違い』です。
ありがとうございます。

デモページは、こちら