Эквивалент $(document).ready без jQuery
У меня есть скрипт, который использует $(document).ready, но не использует ничего другого из jQuery. Я хотел бы облегчить его, удалив зависимость от jQuery.
Как я могу реализовать собственную функциональность $(document).ready без использования jQuery? Я знаю, что использование window.onload не будет тем же самым, так как window.onload срабатывает только после загрузки всех изображений, фреймов и т.д.
4 ответ(ов)
Поместите ваш <script>/*JavaScript код*/</script> прямо перед закрывающим тегом </body>.
Стоит отметить, что это может не подойти всем, так как требует изменения HTML-файла, а не просто добавления чего-то в JavaScript-файл, как это можно сделать с помощью document.ready. Тем не менее, этот подход имеет свои преимущества...
Вы можете использовать следующий код для выполнения работы, когда DOM будет полностью загружен:
document.addEventListener("DOMContentLoaded", function(event) {
// Выполняем действия
});
Обратите внимание, что это может работать только в современных браузерах. Вы можете проверить совместимость с другими браузерами по этой ссылке: http://caniuse.com/#feat=domcontentloaded.
В 2020 году, если у вас есть тег <script> с атрибутом defer, как в следующем примере:
<script src="demo_defer.js" defer></script>
это означает, что скрипт будет выполнен только после завершения разбора (парсинга) всей страницы. Это позволяет загружать скрипт асинхронно, что может улучшить производительность, так как страница будет отображаться быстрее. Скрипты с атрибутом defer выполняются в порядке их появления в коде после того, как весь HTML будет обработан.
Для подробной информации можете обратиться к W3Schools.
В 2022 году вам нужно просто добавить атрибут defer к вашему скрипту и загрузить его в секции head!
Ссылка: https://developer.mozilla.org/ru/docs/Web/HTML/Element/script#attr-defer
<!doctype html>
<html>
<head>
<script src="/script.js" defer></script>
</head>
<body>
<p>В 2022 году вам нужно просто добавить атрибут defer к вашему скрипту и загрузить его в секции head!</p>
</body>
</html>
Как перенаправить на другую веб-страницу?
Прокрутка к элементу с использованием jQuery
jQuery: Получение Выбранного Значения Из Выпадающего Списка
Как проверить радио-кнопку с помощью jQuery?
Существует ли ссылка на "последнюю" библиотеку jQuery в Google APIs?