Question

我想要什么

我正在使用AJAX从服务器端加载HTML片段，我将其附加到文档中，我希望在片段完全添加到dom时获得通知。

我正在做这样的事情：

// Load photos.html from the server with ajax
var instance = loadPageWithAjax('photos.html')

// Wait for response
instance.success = function(response){
   // Create Parent Object
   // Note that I MUST create a new div in my project
   var box = document.createElement('div');
       box.id = 'photos-box';

   // Insert html response to the box's innerHTML
   box.innerHTML = response;

   // Append box to the dom
   document.body.appendChild(box);
}

当片段被添加到dom中时我想使用其中的内容，但我不能，因为我不知道片段何时被实际添加到dom中。

我尝试了什么

我试图在回复后追加一个脚本：

document.getElementById('photo-box') = response 
                                     + '<script>alert(\'loaded\')</script>';

它已添加，但不作为脚本加载我真的不知道为什么？

然后我尝试将其作为一个部分有效的新对象追加：

var script = document.createElement('script');
script.type = 'text/javascript';
script.innerHTML = 'alert(\'loaded\')';
document.getElementById('photo-box').appendChild(script);

但它的加载速度比片段的其他部分快。

那么在片段添加到dom时获得通知的正确方法是什么？

Answer 1

innerHTML setter以及appendChild方法是同步的，因此DOM会立即更新。

您可能希望在加载所有样式表和图像时收到通知。（innerHTML不适用于脚本）

这有点棘手。您将不得不迭代所有图像并检查其loaded状态，然后为每个尚未加载的图像添加onload处理程序。对于样式表，它甚至更复杂。有关可能的实施，请参阅yepnope.js。

Answer 2

对不起，我不完全理解，但如果instance.success = function(response){}在收到回复后被解雇，您应该可以在document.body.appendChild(box)之后调用一个函数，这是正确的还是我离开的？

Javascript：将片段添加到DOM时获取通知

我想要什么

我尝试了什么

2 个答案: