Определить, когда ВСЕ HTML-рендеринг страницы имели место

Question

Я работаю с довольно сложной страницей .aspx, которая полна элементов управления (Telerik, Ajax и т. Д.), Которые все раскрываются, сворачиваются, отображаются, скрываются и т. Д. При загрузке страницы. Поскольку этот рендеринг происходит на стороне клиента и может занимать различное время в зависимости от спецификаций компьютера пользователя, есть ли способ определить, когда все (или некоторые) рендеринг произошел (jQuery?), Поэтому я могу затем действовать на определенные элементы, зная, что они полностью отображаются?

Answer 1

Всякий раз, когда мне приходилось ждать, пока несколько вещей будут готовы, прежде чем продолжить, я создавал массив со значениями true / false. Каждая обязательная часть страницы получает событие, которое при вызове обновляет конкретную запись в массиве до true. Кроме того, он вызывал общую функцию, которая возвращала true, если все значения в массиве были true, в противном случае - false.

Если бы эта функция наконец вернула true, я бы продолжил выполнение. Это особенно полезно, если вам нужно дождаться завершения вызова AJAX, но вы не хотите использовать async = true. Это также полезно, если вы хотите начать загружать сразу несколько вещей, а не одну за другой, поскольку все они сообщают о состоянии готовности в один и тот же массив.

Однако он использует глобальные переменные, поэтому вам может потребоваться выполнить некоторые оптимизации. Возможно, вы не захотите использовать этот подход, если у вас есть недовольство глобальными переменными.

Answer 2

JavaScript является однопоточным. Время, переданное setTimeout, является минимумом, но не максимумом, поэтому, если вы передаете что-то вроде 10 (мс), вы, по сути, говорите: «Выполните этот код после завершения всего выполняющегося в данный момент кода».

Итак, если все элементы управления используют $(document).ready() для выполнения своей задачи, все, что вам нужно:

$(document).ready(function() {
    setTimeout(function() {
        doStuff();
    },10);
});

doStuff будет вызван после выполнения всех функций, переданных в $(document).ready. Тем не менее, это не надежно. Если элементы управления по-своему определяют, загружен ли документ или делают свой собственный setTimeout(), у вас проблемы. Проблема в том, что JavaScript не гарантирует порядок выполнения setTimeout s. Иногда ваш код может выполняться последним, в других случаях он может выполняться до setTimeout s, используемого для анимации.

Последняя идея: если вся анимация выполняется с использованием jQuery, то эффекты выполняются в одной очереди. В doStuff вы можете добавить анимацию некоторого вида с обратным вызовом и быть достаточно уверенным, что обратный вызов будет выполняться последним.

Answer 3

Вы должны поместить свой код в функцию jQuery $ (document) .ready (). Это обеспечит загрузку всех элементов перед выполнением кода.

http://docs.jquery.com/Tutorials:Introducing_$(document).ready()

Answer 4

«Тогда я могу воздействовать на определенные элементы, зная, что они полностью отрисованы?»

Вы можете использовать метод загрузки (ссылка выше) для прикрепления к любому элементу. Так что если у вас есть div с идентификатором «lastElement», вы можете написать

$('div#lastElement).load(runThisFunction);

Answer 5

Я думаю, что документ, который вам нужен:

http://docs.jquery.com/Events/load