Когда срабатывает load?

2.0 Middle🔥 151 комментариев

#Soft Skills и рабочие процессы

Комментарии (1)

🐱

deepseek-v3.2PrepBro AI4 апр. 2026 г.(ред.)

Ответ сгенерирован нейросетью и может содержать ошибки

Событие `load`: когда и как оно срабатывает

Событие load — одно из ключевых событий жизненного цикла веб-страницы и её ресурсов в браузере. Оно сигнализирует о том, что определённый объект (например, окно, изображение, скрипт) завершил загрузку. Понимание моментов его срабатывания критически важно для корректной инициализации скриптов, работы с контентом и оптимизации производительности.

Основные объекты и моменты срабатывания

1. Объект `window` и элемент `<body>` (страница в целом)

Событие load на объекте window (или на элементе <body>/<img>/<script> с атрибутом onload) срабатывает после полной загрузки всей страницы. Это включает:

Парсинг и построение DOM (Document Object Model) из HTML.
Загрузку и выполнение всех синхронных скриптов (<script> без async/defer).
Загрузку всех внешних ресурсов, на которые есть прямые ссылки в HTML: изображения (<img>), стили (<link rel="stylesheet">), фреймы (<iframe>), медиафайлы, шрифты.

Пример использования:

// Навешиваем обработчик на глобальный объект window
window.addEventListener('load', function() {
    console.log('Страница и ВСЕ ресурсы полностью загружены!');
    // Теперь можно безопасно работать с размерами изображений, инициализировать сложные плагины
    const imgWidth = document.querySelector('img.banner').offsetWidth;
    initHeavyThirdPartySlider();
});

// Альтернатива (устаревший, но работающий способ)
window.onload = function() { /* ... */ };

Важно: Если скрипт подключается в <head> и ему нужен доступ к DOM-элементам, использование window.onload — это классическое, но не самое оптимальное решение. Для работы только с готовым DOM (без ожидания изображений) предпочтительнее событие DOMContentLoaded.

2. Отдельные элементы: `<img>`, `<script>`, `<iframe>`, `<link>`

Событие load можно отслеживать на отдельных элементах, чтобы узнать, когда конкретный ресурс станет доступен.

<img>: событие срабатывает, когда изображение полностью загружено и декодировано. Полезно для прелоадеров или каруселей.

const logo = new Image();
logo.src = 'path/to/logo.png';
logo.addEventListener('load', function() {
    document.getElementById('preloader').classList.add('hidden');
    document.body.appendChild(logo);
});
logo.addEventListener('error', function() {
    console.error('Не удалось загрузить логотип');
});

<script> (с динамическим добавлением): событие load указывает на успешную загрузку и выполнение скрипта.

const script = document.createElement('script');
script.src = 'https://api.example.com/widget.js';
script.onload = function() {
    console.log('Сторонний виджет загружен и готов.');
    initWidget();
};
document.head.appendChild(script);

<iframe>: событие срабатывает, когда документ внутри фрейма полностью загружен.

const iframe = document.querySelector('iframe.preview');
iframe.onload = function() {
    console.log('Контент iframe загружен');
    // Теперь можно безопасно обращаться к его содержимому
    // iframe.contentWindow.document...
};

Отличия от других событий загрузки

DOMContentLoaded vs load:

    *   `DOMContentLoaded` срабатывает **после построения DOM-дерева**, не дожидаясь загрузки стилей, изображений и скриптов с `async`/`defer`. Это идеальный момент для инициализации интерфейса, навешивания обработчиков событий.
    *   `load` срабатывает **значительно позже**, после `DOMContentLoaded`, когда загружено всё, включая "тяжёлые" ресурсы.

```javascript
document.addEventListener('DOMContentLoaded', function() {
    console.log('DOM готов. Могу безопасно находить элементы.');
    const button = document.getElementById('myButton'); // Это сработает
});

window.addEventListener('load', function() {
    console.log('Загрузка всего контента завершена.');
    const imgNaturalWidth = document.querySelector('img').naturalWidth; // Здесь уже известно
});
```

readystatechange / document.readyState:

    Свойство `document.readyState` проходит через стадии `loading`, `interactive` (соответствует `DOMContentLoaded`), `complete` (соответствует `window.onload`).

Практические рекомендации и подводные камни

Оптимизация: Не злоупотребляйте window.onload для инициализации основного функционала. Если вашему скрипту не нужны размеры изображений, используйте DOMContentLoaded или размещайте скрипт перед закрывающим тегом </body> — к этому моменту DOM уже будет построен.
Динамически добавленные элементы: Если вы добавляете <img> или <script> в DOM через JavaScript, вы должны навешивать обработчик onload до установки атрибута src. Иначе существует риск, что ресурс загрузится из кеша быстрее, чем будет назначен обработчик, и событие не сработает.
```
// Правильно
const img = new Image();
img.onload = function() { /* ... */ };
img.src = 'photo.jpg';

// Опасно (может пропустить событие, если изображение в кеше)
img.src = 'photo.jpg';
img.onload = function() { /* ... */ };
```
Обработка ошибок: Всегда предусматривайте обработку события error для внешних ресурсов (img.onerror, script.onerror).

Итог: Событие load — это надежный сигнал о полной готовности объекта. Для страницы оно означает загрузку всех ресурсов, для отдельного элемента (тега) — его собственную готовность. Выбор между load и DOMContentLoaded — это всегда баланс между необходимостью в полном контенте и желанием обеспечить быструю интерактивность страницы для пользователя.