ITコラム

jquery load

jQuery

2018.09.05

jQuery【 load 】load メソッドの特徴と使い方

jQueryのloadメソッドは、HTMLファイルの読み込みを行うメソッドです。
今回は、jQueryのloadメソッドの特徴や使用方法、readyとの実行タイミングの違いなどについて紹介します。

最終更新日:2021年6月24日

目次

1.loadメソッド
2. loadとreadyのタイミング
3.loadメソッドの使用方法
4. onメソッドの中でloadを使用
5. まとめ

1.loadメソッド

 
loadメソッドは、HTMLファイルを読み込んで 必要な場所に挿入する際に使用します。

loadメソッドは、引数を指定して 次のように記述します。

$(セレクタ).load( url [, map] [, function] );

loadメソッドの引数の内容は、以下の通りです。

url
読む込むファイルの URL を指定

map
一緒に渡すべきデータをキーと値の組み合わせで指定

function
ロード後に呼び出されるコールバック関数を指定

▲目次へ戻る

 

2. loadとreadyのタイミング

 
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メソッドとの関係について詳しくは、次の記事を参考にして下さい。

▲目次へ戻る

 

3.loadメソッドの使用方法

 
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>

▲目次へ戻る

 

4. onメソッドの中でloadを使用

 
jQuery.3.x バージョン( 2016年6月以降にリリースされているバージョン )から、loadメソッド によるイベントが廃止されています。

そのため、load イベントを使用する際にはjQueryのバージョンを確認して 記述方法を変える必要があります。

jQueryのバージョンによるloadイベントの記述方法は、以下の通りです。

【jQuery.2.xバージョンまでの記述方法】

$(window).load(function(){

  //処理内容

});

【jQuery.3.xバージョンからの記述方法】

$(window).on("load", function(){

  //処理内容

});

▲目次へ戻る

 

5. まとめ

 
jQueryのloadメソッドについて、いかがでしたでしょうか。

「Webプログラマになりたいけど、独力では限界がある」と感じていらっしゃる方には、「プログラマカレッジ」がおすすめです。
プログラマカレッジは、本気でプログラマを目指す方のための受講料無料の研修所です。

今回ご紹介した「jQuery」を含む豊富なカリキュラムで、IT初心者からWebプログラマとして就職するまで、プロが完全にサポートします。
本気でプログラマとして就職・転職したいという方は、一度のぞいてみてはいかがでしょうか。

→ 就職支援付き無料プログラミングスクール「プログラマカレッジ

▲目次へ戻る

SHARE

最新記事

無料相談する

INTERNOUS,inc. All rights reserved.