Запустить функцию JavaScript, когда DOM "готов"?

Я использую загрузку JavaScript script, которая говорит, чтобы запустить функцию инициализации, как только DOM будет готов. В настоящее время я отлично работаю с вызовом функции с помощью body.onload или непосредственно после определения функции. Функция создает некоторый HTML в div-заполнителе, который действует как инструмент для загрузки файлов.

Мой вопрос в том, что является лучшей практикой здесь? Так как это работает сейчас, почему инструкции должны запускать функцию init, как только DOM готов? Должен ли я добавлять тег <script> непосредственно после замещающего DIV, например?

Ответ 1

Самое простое решение - использовать jQuery и его функцию $(document).ready(function() { .... });. Вместо .... вы помещаете свой собственный код.

Обратите внимание, что он в основном делает то же самое @Shadow2531, но также работает в старых браузерах, не поддерживающих это событие.

Ответ 2

<script>
    window.addEventListener("DOMContentLoaded", function() {
        // do stuff
    }, false);
</script>

Вы делаете это, чтобы вы знали, что все проанализированные элементы доступны в DOM и т.д.

Ответ 3

DOM обычно готов до запуска onLoad. onLoad запускается только после того, как все нагрузки - внешние скрипты, изображения, таблицы стилей и т.д.

Но DOM, т.е. структура HTML готова до этого. Если вы запустите код в нижней части страницы (или после тех частей страницы, с которыми работает script), которые также будут работать нормально.

Ответ 4

В 2015 году у вас есть два варианта с современными браузерами:

document.onload

это срабатывает, когда документ загружен, но другие ресурсы (особенно изображения) не обязательно завершают загрузку.

window.onload

это срабатывает при загрузке документа, И загружаются все остальные ресурсы (опять же, особенно изображения).

Оба вышеупомянутых события будут лучше использоваться с window.addEventListener(), конечно, так как допускается использование нескольких слушателей.

Ответ 5

Как вам известно, вы не должны запускать функции init до полной загрузки DOM.

Причина, по которой вы должны запустить функцию init, как только DOM будет готова, заключается в том, что после загрузки страницы пользователь начинает запускать кнопки и т.д. Вы должны свести к минимуму небольшой неизбежный зазор, где загружается страница, функции еще не запущены. Если этот пробел становится слишком большим (т.е. Слишком долгое время), ваш пользователь может столкнуться с неправильным поведением... (т.е. Загрузка не будет работать).

Другие пользователи предоставили прекрасные примеры вызова функции init, поэтому я не буду повторять ее здесь...;)

Ответ 6

Получите jQuery и используйте следующий код.

$(document).ready(function(){
    // Do stuff
});