jQueryのloadメソッドは、HTMLファイルの読み込みを行うメソッドです。
今回は、jQueryのloadメソッドの特徴や使用方法、readyとの実行タイミングの違いなどについて解説いたします。
なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3％で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。
最終更新日：2021年6月24日
loadメソッドは、HTMLファイルを読み込んで 必要な場所に挿入する際に使用します。
loadメソッドは、引数を指定して 次のように記述します。
$(セレクタ).load( url [, map] [, function] );
loadメソッドの引数の内容は、以下の通りです。
| url |
|---|
| 読む込むファイルの URL を指定 |
| map |
| 一緒に渡すべきデータをキーと値の組み合わせで指定 |
| function |
| ロード後に呼び出されるコールバック関数を指定 |
loadメソッドと同様の動作を行うメソッドにreadyメソッドがあります。
因みに、このサイトのソースコードで頻出の
「 $(function() { }); 」
は、
「 $(document).ready(function() { }); 」
と同義です。
このloadメソッドとreadyメソッドは、以下のような違いがあります。
| load |
|---|
| 画像等を含む全てのリソースを完全に受信した後に処理が実行される。 |
| ready |
|---|
| jQueryコードが読み込まれ 操作が可能になったベストなタイミングで 処理が実行される。 |
タイミングとしては、readyメソッドの内容が先に、loadメソッドの内容が後に処理されますが、画像のサイズに依存するような処理内容であれば、loadメソッドを使用すべきです。
また、一般的に、readyメソッドは、「 <body onload=””> 」の記述と共存できません。
loadメソッドを使用する場合は、readyメソッドを使用しないようにするか、jQueryのloadメソッドをwindowやimageのような要素に紐付けて記述するように注意してください。
ほか、loadメソッドとreadyメソッドとの関係について詳しくは、次の記事を参考にして下さい。
loadメソッドを使用して、ファイルを読み込んで表示します。
ロード ボタンをクリックしてみて下さい。
上のサンプルのソースコードは次の通りです。
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function() {
$("#wk_btn").on("click", function() {
// load の引数に ファイルの url を指定（url の後に .クラス名 や #id名 で表示部分を指定可能）
$("#wk_out").load("https://programmercollege.jp/ #top-menu");
});
});
</script>
<div style="background-color : #CCC; padding : 20px 20px 10px;">
<input type="button" id="wk_btn" value=" ロード ">
<div id="wk_out"> </div>
</div>
jQuery.3.x バージョン（ 2016年6月以降にリリースされているバージョン ）から、loadメソッド によるイベントが廃止されています。
そのため、load イベントを使用する際にはjQueryのバージョンを確認して 記述方法を変える必要があります。
jQueryのバージョンによるloadイベントの記述方法は、以下の通りです。
【jQuery.2.xバージョンまでの記述方法】
$(window).load(function(){
//処理内容
});
【jQuery.3.xバージョンからの記述方法】
$(window).on("load", function(){
//処理内容
});
jQueryのloadメソッドについて、いかがでしたでしょうか。
「Webプログラマになりたいけど、独力では限界がある」と感じている方には、「プログラマカレッジ」がおすすめです。
「プログラマカレッジ」は本気でプログラマを目指す方のための、就職支援付き、受講料無料のプログラミングスクールです。
今回ご紹介した「jQuery」を含む豊富なカリキュラムで、IT初心者からWebプログラマとして就職するまで、プロが完全にサポートします。
本気でプログラマとして就職・転職したいという方は、一度のぞいてみてはいかがでしょうか。
INTERNOUS,inc. All rights reserved.
