2

私は ajax 経由で html をロードし、その html を div に入れています。div に入れられた html がロードされたら、javascript をトリガーするにはどうすればよいですか?

onload イベントがこれを探しているものなのか、それとも div 要素で使用できるのかはわかりません。この html は非同期で div に配置されることに注意してください。

編集：

HTMLにはYouTubeビデオが埋め込まれているため、画像をロードする必要があります。

4

1 に答える 1

6

div に入れられた html がロードされたら、javascript をトリガーするにはどうすればよいですか?

コンテキストをdiv、onreadystatechange提供されるコールバックXMLHttpRequest（または使用しているライブラリが提供する「完了」コールバック）に配置した後、それを行うだけです。

例えば：

var xhr = new XMLHttpRequest(/* ... */);
// ...
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status >= 200 && xhr.status <= 299) {
        /* ...put the content in the div...*/

        /* ...call your function... */
    }
};
xhr.send();

にコンテンツを配置する方法は示されていませんが、divすぐに配置されるため、コールバックは必要ありません。

いくつかのコメントは、有用な質問を提起しました: ロードされたコンテンツの画像などはどうですか? それはもっと複雑です。

コンテンツを に配置した後(クリエイティブに という名前の変数にdivがあると仮定します)、不完全な画像がいくつあったかを知る必要があります (競合状態を考慮してください。ブラウザーのJavaScriptはシングルスレッドですが、ブラウザーはすべての画像がロードされたら、コードをトリガーします。divdiv

少し似ています (これがすべて関数内にあると仮定すると、おそらくonreadystatechangeハンドラー):

var images = div.querySelectorAll('img'),
    img, i, done = false;

for (i = 0; i < images.length; ++i) {
    img = images[i];
    img.onload = img.onerror = checkDone;
}
checkDone();

function checkDone() {
    var x, completed = 0;

    if (done) {
        return;
    }

    for (x = 0; x < images.length; ++x) {
        if (images[x].complete) {
            ++completed;
        }
    }

    if (completed === images.length) {
        done = true;

        /* ...call your "load" function here... */
    }
}
于 2013-06-19T21:32:56.183 に答える