1

我想要的是

我正在使用 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 时获得通知的正确方法是什么？

4

2 回答 2

1

innerHTMLsetter 和方法是同步的appendChild，所以 DOM 会立即更新。

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

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

于 2011-11-23T18:16:42.440 回答
0

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

于 2011-11-23T17:22:16.223 回答