ITコラム

jquery load

jQuery

2018.09.05

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

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 を指定(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(){

  //処理内容

});

▲目次へ戻る

SHARE

最新記事

img001

卒業生インタビュー

2019.08.28

【卒業生の声:田中さん】美容師からプログラマーへ転身!PCスキルゼロからチーム開発でリーダーを務めるまでに成長したその秘密に迫る

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 株式会社アニシス プログラマカレッジ卒業生の田中さんにお話しをお伺いしました! 目次 IT業界へ憧れ、PCスキルゼロからプログラマーを目指すー 独 […]

続きを見る

IMG_004

卒業生インタビュー

2019.08.20

【卒業生の声:渡邉さん】宮城の大学とプログラマカレッジへ通学を両立!限られた時間を有効活用し、希望するWEB系の会社へ内定。

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 某WEB系会社 プログラマカレッジ卒業生の渡邉さんにお話しをお伺いしました! 目次 新卒採用の切符を捨て、アイデアを形にできる仕事を目指す 質問が […]

続きを見る

無料相談する

INTERNOUS,inc. All rights reserved.