Ответ
Для определения полной загрузки страницы можно использовать событие load объекта window:
window.addEventListener('load', function() {
console.log('Страница полностью загружена, включая все ресурсы');
});Альтернативно, для DOM-готовности (когда DOM построен, но ресурсы могут ещё грузиться) используйте DOMContentLoaded:
document.addEventListener('DOMContentLoaded', function() {
console.log('DOM полностью построен');
});В современных SPA-фреймворках (React, Vue, Angular) обычно используют их собственные хуки жизненного цикла компонентов. Например, в React это useEffect:
useEffect(() => {
console.log('Компонент смонтирован');
}, []);Разница между load и DOMContentLoaded важна: первый ждёт все ресурсы (изображения, стили), второй срабатывает сразу после построения DOM-дерева.
Ответ 18+ 🔞
А, слушай, вот тебе насущный вопрос — как узнать, когда страница наконец-то загрузилась, а не тупит, как пиздопроебибна? Есть два классических подхода, и тут важно не перепутать, а то будешь как Герасим — «Му-му» говорить, а нихуя не работать.
Первый вариант — событие load на window. Оно сработает, когда всё, абсолютно всё, включая картинки, стили и прочую хуйню, уже на месте. То есть полная готовность, можно чай пить.
window.addEventListener('load', function() {
console.log('Страница полностью загружена, включая все ресурсы');
});Альтернатива — DOMContentLoaded на document. Вот это штука умнее: она ждёт только построения DOM-дерева, а ресурсы пусть себе грузятся дальше, как хотят. Быстрее, эффективнее, особенно если тебе надо поскорее скрипты запустить.
document.addEventListener('DOMContentLoaded', function() {
console.log('DOM полностью построен');
});Разница, блядь, принципиальная! load — это как ждать, пока все гости на свадьбу приедут, включая того долбоёба, который вечно опаздывает. А DOMContentLoaded — это когда основные уже за столом, можно начинать жрать, не дожидаясь остальных.
В современных SPA-фреймворках, типа React, Vue или Angular, там вообще свои приколы. Они используют свои хуки жизненного цикла. Например, в React — useEffect с пустым массивом зависимостей. Это типа «эй, компонент смонтировался, делай что надо».
useEffect(() => {
console.log('Компонент смонтирован');
}, []);Так что выбирай с умом, а то получится «ядра — чистый изумруд», а на деле — просто ядрёна вошь в коде.