イベント関連の機能 (2/6)
作成:2010-04-04 16:54
更新:2010-05-11 21:11
更新:2010-05-11 21:11
■Google Ajax Libraries APIの初期化処理
初期化処理で、注意しなければならないのは、Google Ajax Libraries APIを利用している場合です。このAPIを利用している場合、<script>タグで直接ライブラリをロードするのではなく、google.loadメソッドを使って特定のライブラリをロードします。
このgoogle.loadは、非同期にライブラリを読み込みます。つまり、ロードに時間がかかったりすると、場合によってはライブラリのロード完了がページのロードよりも遅くなってしまうこともあるのです。つまり、ページは読み込み終わっているけれど、またjQueryのライブラリの読み込みが終わらない、というような状況も当然ありえます。
となると、そのような状態でjQueryの機能を使ったスクリプトが呼び出されると、スクリプトはエラーとなってしまいます。従って、APIを使っている場合には、google.loadによるライブラリのロードが完了した後に処理を実行するようにしなければいけません。このため、API利用時の初期化処理は、googleオブジェクトの「setOnLoadCallback」というメソッドを利用するようになっています。
下のリスト部分に、実際にAPIを使ってjQueryによる初期化処理を行うサンプルを掲載しておきます。google.loadでライブラリのロードを開始した後、google.setOnLoadCallbackで初期化処理を設定しています。
ただし、注意したいのは、jQueryのライブラリのロードが完了しても、その時点でDOMツリーの構築が完了しているとは限らない、という点です。逆に、ライブラリのロードがページのロードよりも早く終わってしまった、ということもありえないとは限りませんから。
そこで、google.setOnLoadCallbackに用意する関数リテラルで、更に$(document).readyを使って初期化処理を行うようにしています。このようにすることで、ライブラリのロードが早くとも遅くとも、問題なく初期化処理が行われるようになるでしょう。
このgoogle.loadは、非同期にライブラリを読み込みます。つまり、ロードに時間がかかったりすると、場合によってはライブラリのロード完了がページのロードよりも遅くなってしまうこともあるのです。つまり、ページは読み込み終わっているけれど、またjQueryのライブラリの読み込みが終わらない、というような状況も当然ありえます。
となると、そのような状態でjQueryの機能を使ったスクリプトが呼び出されると、スクリプトはエラーとなってしまいます。従って、APIを使っている場合には、google.loadによるライブラリのロードが完了した後に処理を実行するようにしなければいけません。このため、API利用時の初期化処理は、googleオブジェクトの「setOnLoadCallback」というメソッドを利用するようになっています。
google.setOnLoadCallback( 関数リテラル );google.loadした後、このような形で初期化処理を記述しておきます。これで、ライブラリのロードが完了した後、問題なく初期化処理が実行されるようになります。
※利用例
下のリスト部分に、実際にAPIを使ってjQueryによる初期化処理を行うサンプルを掲載しておきます。google.loadでライブラリのロードを開始した後、google.setOnLoadCallbackで初期化処理を設定しています。
ただし、注意したいのは、jQueryのライブラリのロードが完了しても、その時点でDOMツリーの構築が完了しているとは限らない、という点です。逆に、ライブラリのロードがページのロードよりも早く終わってしまった、ということもありえないとは限りませんから。
そこで、google.setOnLoadCallbackに用意する関数リテラルで、更に$(document).readyを使って初期化処理を行うようにしています。このようにすることで、ライブラリのロードが早くとも遅くとも、問題なく初期化処理が行われるようになるでしょう。
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
●プログラム・リスト●
<html>
<head>
<meta http-equiv="Content-Type"content="text/html; charset=UTF-8">
<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
<!--
google.load("jquery", "1.4");
google.setOnLoadCallback(
function(){
$(document).ready(function(){
$('#message').text('ロード完了！');
});
}
);
//-->
</script>
</head>
<body>
<H1>TEST.</H1>
<div id="message">※ロード中……</div>
</body>
</html>
※関連コンテンツ