jQuery版window.onload
jQueryの実行といえば、毎度お馴染み
$(function(){
});
});
ですね。docment.readyです。
この実行は、DOM要素の実行を待ってからという意味になるのですが、必ずしも全てのDOM要素を待たずに実行したいケースもあるかもしれません。たとえば、Javascriptで言う、『window.onload』みたいなあれ。
jQuery.event.add(window, "load", function(){ …/* hogehoge*/ });
これだけ、簡単ですね。
jQuery版window.onloadの使用例
あまり出番が無いように思えるjQuery版window.onload。
しかし、Ajaxページ読み込みではかなり有効に使えます。
ページ読み込みの例
id hogeのブロックに、あるURLを読み込む例です。
読み込み完了したら、pにhiddenクラスをあてて、かくしてあげたい、Ajaxページ読み込みの典型的な例です。
悪い例
これでも悪くはないのですが、load実行されて、表示が完了するより速くaddClassが実行されてしまうことがあります。
ちょっと重たいページの読み込みで使うには不十分なのです。
var url = "http://example.com/";
$('#hoge').load(url,function(){
$("p#loading").addClass("hidden");
});
よい例
こちらはjQuery.event.addの例。表示が完了されてから処理を実行してくれるので、重たいページの読み込みにはこちらが最適です。
var url = "http://example.com/";
$('#hoge').load(url,jQuery.event.add(window, "load", function(){$("p#loading").addClass("hidden");}));