Javascript: получать уведомления при добавлении фрагмента в DOM - PullRequest
Новая
       15

Javascript: получать уведомления при добавлении фрагмента в DOM

1 голос
/ 23 ноября 2011

Что я хочу

Я загружаю фрагмент HTML со стороны сервера с помощью AJAX и добавляю его в документ, и мне нужен способ получать уведомления, когда фрагмент полностью добавлен в 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);

Но он загружается быстрее, чем другие части фрагмента.

Так, как правильно получать уведомления, когда фрагмент добавляется в домен?

Ответы [ 2 ]

1 голос
/ 23 ноября 2011

Установщик innerHTML, а также методы appendChild являются синхронными, поэтому DOM обновляется немедленно.

Возможно, вы захотите получить информацию, когда будут загружены все таблицы стилей и изображения.(innerHTML не работает со скриптами)

Это немного сложно.Вам нужно будет перебрать все изображения и проверить их состояние loaded, а затем добавить обработчик onload для каждого изображения, которое не было загружено.
Для таблиц стилей это еще сложнее.Смотрите yepnope.js для возможной реализации.

0 голосов
/ 23 ноября 2011

Извините, я не до конца понимаю, но если instance.success = function(response){} сработает, как только вы получите ответ, вы сможете вызывать функцию после document.body.appendChild(box), это правильно или я отключен?

...