Mach3.laBlog

jQueryの$(document).readyをセレクタで使いたい

この記事は賞味期限切れです。(更新から1年が経過しています)

jQueryでDOMのロード完了を検知するのに使われる$(document).readyですが、
これを未挿入の要素に対して使いたい。そんなメモログ。

jQueryの$(document).readyをセレクタで使いたい

$(document).ready()について

まず、$(document).ready()について。
引数に渡された関数が、HTMLのDOM構築が完了した時点で呼ばれるという便利機能。

$(document).ready(function(){
    // DOMロード完了時に実行される
    alert("Hello, world !");
});

jQueryを使っていれば一度はお目にかかる定型文ですね。
仕組みについては、こちらの記事が大変詳しく書いてありました。
$(document).ready(f)、bindReady()、$.ready() 解読 ──jQuery解読(32)

$( selector ).onReady();

で、今回は”document”が入っている部分にセレクタを渡して、
その要素がJSで動的に挿入されたタイミングで関数を実行させる… というのが趣旨です。

書いてみたのはこちら。
mach3/js-jquery-onready – GitHub

簡単な使い方

$("#MyContainer").onReady( function(){
    this.append("Hello, world!");
});
$("#hoge").click( function(e){
    $("<div />").attr("id", "MyContainer").appendTo("body");
});

最初は#MyContainerは存在せず、#hogeボタンをクリックする事でbodyに追加されます。
追加されるとそれを検知して、#MyContainerに”Hello, world!”が表示されます。

オプション

内部的には、お察しの通りsetTimeoutでまわしてるだけですが、
そのインターバルと制限時間を第二引数のオプションで設定する事も出来ます。

$("#MyContainer").onReady(
    function(){
        // Do anything.
    },
    {
        "limit" : 30000, // 制限時間(ミリ秒)
        "delay" : 1000 // インターバル(ミリ秒)
    }
);
limit : number = 60000
制限時間。これを超えるとonReadyは諦めます。デフォルトは1分。
delay : number = 500
setTimeoutのインターバル。デフォルトは0.5秒。

いつ使うの?

さして出番は多くないかもしれませんが、
例えばscript要素を差し込むタイプのサードパーティのウィジェット等で、
ページ最下部の非表示ブロック内でロードさせておいて、
ロードされたら本来あるべき場所にappendする、等。
多少のページパフォーマンスの向上に役立つかもしれませんね?

あとは、同じくウィジェットの要素からいろいろ抜き取って加工して表示させたい場合などに。

コメント

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


*

jQuery1.5のsubとthenを使ってRSSリーダーを作る:</gecko>:げことじ。:日常からWEBまで:d41d8cd98f00b204e9800998ecf8427e
HTML+JavaScriptでiPhone/Androidアプリを作れるTitanium Mobileとは(1/3) – @IT と9件… | プログラム、いろいろ。d41d8cd98f00b204e9800998ecf8427e
Tweets that mention jQueryの$(document).readyをセレクタで使いたい | Mach3.laBlog -- Topsy.comd41d8cd98f00b204e9800998ecf8427e