back

イベント関連の機能 (2/6)

■Google Ajax Libraries APIの初期化処理

初期化処理で、注意しなければならないのは、Google Ajax Libraries APIを利用している場合です。このAPIを利用している場合、<script>タグで直接ライブラリをロードするのではなく、google.loadメソッドを使って特定のライブラリをロードします。

この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>



　 　

記事のリストに戻る



PC Site G+ mail
copyright 2009. SYODA-tuyano.