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

colmun_main11678

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

目次

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

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 のような要素に紐付けて記述するように注意してください。

▲目次へ戻る

 

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 を指定
    $("#wk_out").load("/jquery/ #textwidget");

  });
});
//-->
</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(){

  //処理内容

});

▲目次へ戻る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です