Атрибут onload тега <body>
Описание
Атрибут onload позволяет задать JavaScript-код, который выполняется после полной загрузки всей веб-страницы, включая все зависимые ресурсы (изображения, стили, скрипты). Это один из самых распространенных способов инициализации JavaScript-кода после готовности DOM.
<body onload="initApplication()">
<h1>Мое приложение</h1>
<div id="app-container"></div>
<script>
function initApplication() {
console.log('Документ полностью загружен');
document.getElementById('app-container').innerHTML =
'<p>Приложение инициализировано</p>';
// Дополнительная инициализация
loadData();
setupEventHandlers();
}
</script>
</body>
Рекомендации по использованию:
- Используйте для инициализации основного функционала страницы
- Для более раннего выполнения используйте
DOMContentLoaded - Избегайте блокирующих операций в обработчике
- Для сложных приложений используйте модульную систему
- Сочетайте с обработчиками ошибок загрузки
Практический пример с асинхронной загрузкой:
<body onload="initializeApp()">
<div id="loader">Загрузка...</div>
<main id="app-content" style="display:none;"></main>
<script>
async function initializeApp() {
try {
const data = await fetch('/api/data').then(r => r.json());
const user = await fetch('/api/user').then(r => r.json());
renderApp(data, user);
document.getElementById('loader').style.display = 'none';
document.getElementById('app-content').style.display = 'block';
} catch (error) {
showError(error);
}
}
</script>
</body>
Важные замечания:
- Срабатывает только один раз при первоначальной загрузке
- Не срабатывает при навигации через History API
- Может задерживаться при медленной загрузке ресурсов
- В современных SPA-приложениях часто не используется
- Альтернатива - использовать defer для скриптов
SEO рекомендации:
- Не полагайтесь только на JavaScript для критического контента
- Используйте Server-Side Rendering для важного контента
- Избегайте длительных операций перед отрисовкой
- Для прогрессивного улучшения начинайте с базового HTML
Примечание: В современных веб-приложениях вместо onload чаще используют модульные системы и фреймворки, которые предоставляют более надежные способы инициализации приложения. Однако для традиционных сайтов onload остается простым и эффективным решением.