JQuery: обнаружение при загрузке элемента и всех детей

Question

Я хочу, чтобы код выполнялся, когда определенный элемент и все его дочерние элементы находятся в DOM. Я знаю, как опросить существование желаемого элемента или, что еще лучше, использовать MutationObserver, но нужный элемент сам по себе довольно большой, и я не могу быть уверен, что все его дети полностью загружены просто на основе его существующего.

Я мог ждать ready, который вызывается, когда все DOM загружен, но обычно загрузка страницы занимает довольно много времени. В интересах скорости я хотел бы знать, не обязательно ожидая $(document).ready().

Я нашел функцию on, я люблю то, что он будет вызван для элементов, которые еще не существуют даже:

$(document).on('SomeEvent', '#desiredElem', handler);

... однако я не знаю событие, которое запускается для полного элемента html в DOM.

Мой скрипт вводится в браузер, и я знаю, что он работает долгое время до $(document).ready() или DOMContentLoaded. В основном я хотел бы воспользоваться этим. К сожалению, я не могу добавить теги <script>.

На стороне заметки будет интересным событие для существующего объекта. Это избавит меня от необходимости использовать MutationObserver.

Answer 1

Поскольку вы сказали, что вы пытаетесь разглядеть, когда элемент и все его дети, которые присутствуют в исходном HTML страницы загружаются, есть несколько вещей, которые вы можете сделать:

1. вы можете проверить на наличие любого известного элемента после последнего ребенка. Поскольку элементы HTML загружаются последовательно по порядку, если присутствует элемент после последнего дочернего элемента, то все до того, как оно уже должно быть в DOM, поскольку HTML-страница страницы вставляется только в том порядке, в котором она отображается в исходном HTML-источнике страницы.

2. Если вы поместили тег <script> после соответствующего HTML-кода на страницу, то весь HTML до этого тега <script> уже будет в DOM, если этот тег скрипта запущен.

3. Вы можете опросить или использовать наблюдателя с мутацией, но, скорее всего, это не поможет вам, потому что никакие сценарии не выполняются, пока парсер DOM находится в середине вставки кучи HTML на страницу. Таким образом, ваши сценарии или события мутации будут выполняться только после того, как вся страница DOM была вставлена ​​в любом случае или когда страница приостановится, чтобы загрузить другой встроенный ресурс, такой как тег <script>.

4. Вы можете вернуться к событию DOMContentLoaded, которое сообщит вам, когда загрузится вся DOM.

Для более конкретной помощи, мы должны понять гораздо больше о вашей конкретной ситуации, в том числе пример HTML, который вы пытаетесь наблюдать за и полного понимания того, что именно ограничения вы (то, что вы можете изменить в источнике страницы и где на странице вы можете вставлять или запускать скрипты).

Answer 2

Вам нужно настроить таймер и держать соблюдая DOM проверки, если элемент существует или нет

function checkIfLoaded(callBack, elementSelector) 
    setTimeout(function(){ 

    $(elementSelector).size() == 0) 
    { 
     //continue checking 
     checkIfLoaded(callBack, elementSelector) 
    } 
    else 
    { 
     callBack(); 
    } 
    }, 1000); 
) 

checkIfLoaded(function(){ alert("div loaded now") }, "#divId");