如何触发一些JavaScript一旦HTML（已通过AJAX加载）加载？

Question

我通过ajax加载html，然后将该html放入div。一旦已经加载到div的HTML已经被加载，我该如何触发JavaScript？

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

编辑：

在html具有嵌入的YouTube视频，因此具有加载的图像。

Answer 1

一旦已经加载到div的HTML已被加载，我该如何触发JavaScript？

你就去做把上下文在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... */ 
    } 
}