如何触发一些javascript一旦html(已通过ajax加载)加载

How to trigger some javascript once html (which has been loaded via ajax) loads?

本文关键字：加载 已通过 ajax html 一旦 何触发 javascript      更新时间：2023-09-26

我正在通过ajax加载html，然后将该html放入div中。一旦将html放入div中，我如何触发javascript ?

我不知道如果onload事件是我正在寻找这个，或者如果它甚至与div元素可用。请记住，这些html将被异步地放入div中。

编辑:

HTML有一个嵌入的YouTube视频，所以它必须加载一个图像。

我如何触发javascript一旦html已放入div已加载?

您只需在将上下文放入div后，在XMLHttpRequest提供的onreadystatechange回调中(或由您正在使用的任何库提供的"完成"回调)。

例如:

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(让我们假设div在一个创造性地命名为div的变量中)之后，您需要知道有多少不完整的图像(考虑到竞争条件，因为尽管浏览器上的JavaScript是单线程的，但浏览器不是)，然后在所有图像加载后触发代码。

有点像(假设这都在一个函数中，也许是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... */
    }
}
相关文章：