Событие загрузки страницы

@Титан_1 · Регистрация: 24.05.2014

Студворк — интернет-сервис помощи студентам

есть _Layout:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE HTML>
<html>
<head>
    @await Html.PartialAsync("_MetaPartial")
    @await Html.PartialAsync("_CssPartial")
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="~/js/main.js"></script>
@RenderBody()
</body>
</html>

и main.js:

JavaScript
1
2
3
4
5
6
7
8
console.log("js loaded");
document.addEventListener('load', animate($(".wrapper")));
 
function animate(element) {
    element.addClass("animate");
    console.log(element[0]);
    
}

В body есть .wrapper. И если я поставлю загрузку main.js ДО @RenderBody(), то ничего не сработает, а в консоли будет

js loaded 

undefined

. Если же поставить скрипт ПОСЛЕ @RenderBody(), то всё сработает как надо, а в консоли будет

js loaded

<div class="wrapper center animate" style="width: 60vw">...</div>

.
Почему load/DOMContentLoaded срабатывают ДО @RenderBody()? DOM же ещё не заполнен? И ладно с ними. Но вот какую функцию я должен использовать, чтобы она выполнялась после настоящей загрузки страницы (а не её куска без body)?

пробовал даже так:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE HTML>
<html>
<head>
    @await Html.PartialAsync("_MetaPartial")
    @await Html.PartialAsync("_CssPartial")
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="~/js/main.js"></script>
@RenderBody()
</body>
<script>
        let event = new Event("reallyLoaded");
        document.dispatchEvent(event);
</script>
</html>

И нет! Всё равно ничего не работает! Да как такое возможно? Почему здесь main.js работает ПОСЛЕ загрузки body:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE HTML>
<html>
<head>
    @await Html.PartialAsync("_MetaPartial")
    @await Html.PartialAsync("_CssPartial")
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
@RenderBody()
<script src="~/js/main.js"></script>
</body>
</html>

А <script> под body – ДО?

Добавлено через 7 минут
изменил внутренний скрипт так:

JavaScript
1
2
3
let event = new Event("reallyLoaded");
document.dispatchEvent(event);
console.log(document);

И внучную вызвал console.log(document) в консоли.

document, вызванный скриптом и document, вызванный мною – соврешенно разные. Первый – это какой-то список непонятных параметров, а второй – DOM-дерево

~~Это что получается, при console.log(document); внутри скрипта DOM вообще не был загружен? Бред какой-то~~

Добавлено через 5 минут
Нет, внутри document.childNodes можно увидеть элементы. Просто представления почему-то совершено разные. И div.wrapper.center, кстати, там тоже есть. Так а почему тогда animate($(".wrapper")) не работает? Тут только один вариант – событие "reallyLoaded" срабатывает до скрипта. Как такое может быть?

@MsGuns · 10.05.2021, 16:02

https://metanit.com/sharp/mvc/4.4.php

@Титан_1 · 10.05.2021, 16:12 **[ТС]**

MsGuns, и каким образом это должно ответить на мои вопросы? Там не слова про события загрузки страницы

Добавлено через 6 минут
Поразительно, но даже так событие срабатывает

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
document.addEventListener("jsIsStupid", animate($(".wrapper")));
 
 
function do_after_page_loaded() {
    animate($(".wrapper"));
}
 
function animate(element) {
    element.addClass("animate");
    console.log(element[0]);
    console.log("js is stupid");
}

... срабатывает событие, которого не существует!!! Какого хрена оно срабатывает? Что не так с EventListener?

@MsGuns · 10.05.2021, 17:25

Титан_1, С какой целью Вы вставили @RenderBody ? Вы знаете, как оно работает ? А если нет, то посмотрите итоговую разметку страницы на клиенте, и что там будет вместо этой строки.
Где у Вас вообще разметка страницы ? Где пресловутый wrapper или что у Вас там за него с таким классом ?
Что у Вас делается на сервере вообще не видно ниоткуда. Как строится разметка, что мастер, что части, - неизвестно.
Суете вызов скриптов в <body> - какой в этом великий смысл ?

Я специально дал Вам ссылку чтобы Вы задумались - нужен ли там рендер или можно просто обойтись PartialView или даже @Html.Action для заполнения частичных страниц просто вызовом соответствующих методов контроллера ?

По поводу событий браузера вообще не буду ничего советовать, потому что есть подозрение, что Вы сильно "плаваете" в этой теме.

Добавлено через 7 минут
Смутно подозреваю, что Вы хотите грузить страницу поэтапно: сначала мастер-страницу, а затем частями контент. Ну типа чтобы страница быстро открывалась, а потом в фоне подкачивались ее фрагменты (частичные представления).
Но это делается совсем по-другому - сначала грузится Мастер, а затем после отрисовки DOM запускаются скрипты, которые асинхронно тянут с сервера контент частичных страниц и кладут его в указанные блоки макета страницы.
Но нигде в Ваших хатмелях я не увидел намека на аякс..

@Титан_1 · 10.05.2021, 19:23 **[ТС]**

MsGuns, Как это с какой? Чтобы у меня там рендерились представления. В коде я демонстрировал мастер-страницу, что можно было увидеть по названию _Layout. Вот Index.cshtml, который вставляется вместо @RenderBody(), если он вам нужен для понимания ситуации:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
@using Ubhelper.Service
<div class="pre-center">
    <div class="wrapper center" style="width: 60vw">
        <div class="header">
            <img src="https://www.cyberforum.ru/images/bench-speed-150t.gif" height="60px" width="60px"/>
            <h1>@Config.Name</h1>
            <h3>
                Узнай, запустится ли программное обеспечение или игра на твоём компьютере.
            </h3>
            <p>
                @Config.Name сравнивает ваш компьютер с требованиями ПО и подсказывает какие комплектующие нужно обновить. <br/>
                Данные об комплектующих вашего компьютера берутся с сайтов-бенчмарков
            </p>
        </div>
        <nav class="hr">
            <ul>
                <li class="button" ><a href="Hardware">Таблица комплектующих</a></li>
                <li class="button" style=@ViewBag.Button1Style><a href="@ViewBag.Button1Link">@ViewBag.Button1Text</a></li>
                <li class="button"  style=@ViewBag.Button2Style><a href=@ViewBag.Button2Link>@ViewBag.Button2Text</a></li>
                <li class="button bad" style=@ViewBag.Button3Style><a href=@ViewBag.Button3Link>Выйти</a></li>
            </ul>
        </nav>
    </div>
</div>

Страница грузиться сразу вся, а _Layout нужен для того, чтобы не писать один и тот же код в каждом представлении. Аякса у меня нету

@sau · 10.05.2021, 19:33

Титан_1,
https://learn.javascript.ru/on... tentloaded
ваш вариант DOMContentLoaded

load - это сработает после загрузки скрипта . но сам дом при этом до конца не построен

П.С Если уж юзаете jquery , то там есть $(document).ready (()=>{ ... }) , которое так же вызывает колбэк после полной загрузки документа

@Титан_1 · 10.05.2021, 19:37 **[ТС]**

Я понял свою ошибку – в addEventListener нужно указывать имя функции, а не саму функцию. Странно, что никто не заметил такую грубую ошибку

@MsGuns · 10.05.2021, 20:22

Сообщение от Титан_1

Страница грузиться сразу вся, а _Layout нужен для того, чтобы не писать один и тот же код в каждом представлении

Тогда почему такие танцы вместо простого PartialView..

@Wolfdp · 10.05.2021, 21:53

Не по теме:

Сообщение от MsGuns

нужен ли там рендер или можно просто обойтись PartialView

Вы по ходу стебетесь.

Сообщение от Титан_1

JavaScript
1
document.addEventListener('load', animate($(".wrapper")));

Если быть точнее, то вы в addEventListener передаете результат выполнения animate, а не её имя. Чтобы передать функцию, нужно хотя бы так

JavaScript
1
document.addEventListener('load', () => { animate($(".wrapper")); });

Сообщение от Титан_1

Странно, что никто не заметил такую грубую ошибку

1. это раздел про шарп, а не js
2. чем больше простыня, тем меньше желания вчитыватся и пробегаешься по диагонали. Увы, но такие мелочи ответит либо человек, который явно стыкался с этим, либо много работает с js.

@Титан_1 · 12.05.2021, 18:29 **[ТС]**

Сообщение от Wolfdp

чем больше простыня, тем меньше желания вчитыватся и пробегаешься по диагонали

Согласен, я изначально не понял, где искать, но уже во втором своём ответе я очень чётко указал на "точку" ошибки (тем не менее, ещё не поняв её причины)

Новые блоги и статьи Все статьи Все блоги /
PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Access VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .
Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .	Мысли в слух kumehtar 18.11.2025 Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .	Создание Single Page Application на фреймах krapotkin 16.11.2025 Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .

@MsGuns 1497 / 1238 / 245 Регистрация: 04.04.2011 Сообщений: 4,363
	10.05.2021, 16:02
	https://metanit.com/sharp/mvc/4.4.php 0

@MsGuns 1497 / 1238 / 245 Регистрация: 04.04.2011 Сообщений: 4,363
	10.05.2021, 17:25
	Титан_1, С какой целью Вы вставили @RenderBody ? Вы знаете, как оно работает ? А если нет, то посмотрите итоговую разметку страницы на клиенте, и что там будет вместо этой строки. Где у Вас вообще разметка страницы ? Где пресловутый wrapper или что у Вас там за него с таким классом ? Что у Вас делается на сервере вообще не видно ниоткуда. Как строится разметка, что мастер, что части, - неизвестно. Суете вызов скриптов в <body> - какой в этом великий смысл ? Я специально дал Вам ссылку чтобы Вы задумались - нужен ли там рендер или можно просто обойтись PartialView или даже @Html.Action для заполнения частичных страниц просто вызовом соответствующих методов контроллера ? По поводу событий браузера вообще не буду ничего советовать, потому что есть подозрение, что Вы сильно "плаваете" в этой теме. Добавлено через 7 минут Смутно подозреваю, что Вы хотите грузить страницу поэтапно: сначала мастер-страницу, а затем частями контент. Ну типа чтобы страница быстро открывалась, а потом в фоне подкачивались ее фрагменты (частичные представления). Но это делается совсем по-другому - сначала грузится Мастер, а затем после отрисовки DOM запускаются скрипты, которые асинхронно тянут с сервера контент частичных страниц и кладут его в указанные блоки макета страницы. Но нигде в Ваших хатмелях я не увидел намека на аякс.. 0

@sau 2773 / 2073 / 386 Регистрация: 22.07.2011 Сообщений: 7,820
	10.05.2021, 19:33
	Титан_1, https://learn.javascript.ru/on... tentloaded ваш вариант DOMContentLoaded load - это сработает после загрузки скрипта . но сам дом при этом до конца не построен П.С Если уж юзаете jquery , то там есть $(document).ready (()=>{ ... }) , которое так же вызывает колбэк после полной загрузки документа 1

@Титан_1 21 / 21 / 3 Регистрация: 24.05.2014 Сообщений: 1,063
	10.05.2021, 19:37 [ТС]
	Я понял свою ошибку – в addEventListener нужно указывать имя функции, а не саму функцию. Странно, что никто не заметил такую грубую ошибку 0