Получить профессию в Skypro
Запуск JavaScript функции при загрузке страницы без jQuery
Пройдите тест, узнайте какой профессии подходите
Быстрый ответ
Если вам требуется запустить функцию JavaScript сразу после полного обработания документа, примените следующий код:
document.addEventListener('DOMContentLoaded', () => {
myFunction();
});
function myFunction() {
// Логика функции
}В данном примере мы используем DOMContentLoaded для активации функции сразу после обработки HTML, но до загрузки внешних ресурсов, таких как изображения.
Однако, если функция должна быть вызвана после полной загрузки всех ресурсов страницы, используйте window.onload:
window.onload = () => {
myFunction();
};
function myFunction() {
// Реализация функции
}В зависимости от ситуации можно использовать DOMContentLoaded для активации после построения DOM или window.onload после полной загрузки страницы.
Групповое выполнение – активация нескольких функций
Бывают случаи, когда при загрузке страницы требуется вызвать несколько функций. Для этого просто оберните их в анонимную функцию:
window.onload = () => {
firstFunction();
secondFunction();
// Тут можно добавить вызовы других функций
};
function firstFunction() { /* реализация первой функции */ }
function secondFunction() { /* реализация второй функции */ }Такой подход позволяет инициировать выполнение нескольких действий одновременно.
Что касается структуры вашего веб-сайта, то здесь нужно быть внимательным. Если вы работаете с HTML без тега <body> или с JSP-фрагментами, разместите JavaScript в соответствующем месте.
Самостоятельное выполнение – отказ от помощи jQuery
Современный JavaScript обладает всеми необходимыми инструментами для работы без использования библиотек, таких как jQuery. Он предлагает встроенные возможности, которые порой могут быть более эффективными и приближенными к стандартам.
Не забывайте проводить тестирование функций после загрузки страницы.
Сложная инициализация? Нет проблем
Для обработки асинхронных операций или загрузки данных можно использовать промисы JavaScript или async/await в контексте window.onload.
Тонкая настройка 'Когда' выполнять JavaScript
Чтобы оптимизировать момент выполнения JavaScript, используйте атрибуты async или defer в теге <script>, либо разместите скрипты в конце элемента <body>:
<script defer src="/path/to/your/script.js"></script>Визуализация
Процесс загрузки страницы и выполнения функции можно представить как отправление поезда:
Станция Onload 🚉: [📄 Загрузка страницы]
Локомотив JavaScript 🚂: [🚀 Выполнение функции]Поезд собирается к отправке, и браузер подает сигнал (активирует функцию):
window.onload = function() { 🚂💨 };И вуаля, ваша функция в действии:
📄🚉 -> 🚂💨🛤️ -> 🚀Учёт разных сценариев
Для динамических сайтов порой требуется особая инициализация переменных или состояний внутри window.onload или DOMContentLoaded. Не забывайте тестировать код, чтобы убедиться в его корректности при различных условиях.
window.onload = () => {
// Установка начального состояния
setupPage();
// Заполнение динамического контента
populateDynamicContent();
// Инициализация слушателей событий
setupEventListeners();
// И, наконец, время для заслуженного кофе
};Полезные материалы
- Window: событие load – Web APIs | MDN — Детальное описание событий
loadв JavaScript. - Разница между событиями DOMContentLoaded и load – Stack Overflow — Сравнение
DOMContentLoadedиload. - .ready() | jQuery API Documentation — Объяснение метода
.ready()в jQuery и его аналогов в JavaScript. - EventTarget: метод addEventListener() – Web APIs | MDN — Погружение в метод
addEventListener(). - Тег Script – атрибуты async & defer – Stack Overflow — Обзор атрибутов
asyncиdeferдля загрузки скриптов. - Использование промисов – JavaScript | MDN — Гид по промисам для асинхронных операций.
- Загрузка сторонних JavaScript – web.dev — Статья о оптимизации загрузки внешних скриптов.