Почему мы иногда пишем document.ready а иногда нет? В чем отличие от window.load?

Question

JackShcherbakov @JackShcherbakov

JavaScript

Почему мы иногда пишем document.ready а иногда нет? В чем отличие от window.load?

У меня уже голова болит от этого! В книге ужасно объясняется этот момент! До 5-ой главы в скриптах я никакого document.ready не писал, а тут, когда дело дошло до событий автор резко вспомнил что надо писать document.ready а почему сказал только то, что это надо что бы JS код выполнялся после того как загрузится DOM! Но а зачем тогда этот window.load? И зачем вообще все это, если все и без этого работает?

Спасибо всем, кто поможет!

Вопрос задан более трёх лет назад
2599 просмотров

Комментировать

Подписаться 1 Оценить Комментировать

Решения вопроса 1

3 комментария

Пригласить эксперта

Ответы на вопрос 1

5 комментариев

JackShcherbakov @JackShcherbakov Автор вопроса

Просто вот код, все работает. (Книга постоянно подножки ставит!)

<!DOCTYPE html>
<html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Untitled 1</title>
<script src="jquery-3.2.1.min.js"></script>
<script>
	score = 0;
	var questions = [
	['Сколько языков должен знать Front-end разработчик?', 3],
	['2 + 4', 6],
	['Сколько ног у собаки?', 4]
		];
	var xxad = prompt ('Введите ссылку', '');
	function askQuestion(question){
		var answer = prompt(question[0], '');
		if (answer == question[1]){
			alert('Верно!');
			score++;
		}
		else {
			alert('Правильный ответ - ' + question[1]);
		}
	}
	for (var i = 0; i<questions.length; i++){
		askQuestion(questions[i]);
	}
</script>
<style>
	p.answer{
	font-family:Arial, Helvetica, sans-serif;
	 color:blue;
	}
</style>
</head>
<body>
	<h1>Сайты 1</h1>
	<a href="https://www.youtube.com">GG</a>	
	<a href="https://www.youtube.com">GGG</a>	
	<a href="https://www.youtube.com">DFF</a>	
	<h1>Результаты викторины</h1>
	<script>
		document.write('<p class=\'answer\'>Ваш счет ' + score + ' очка из ' + questions.length + '</p>');
		var bad = questions.length/2;
		if (score <= bad){
			$('p.answer').css(
				{
				'color' : '#ff0000',
				'text-decoration' : 'underline'
				}
			);
			document.write('Вот ваша ссылка -' + '<a class="here"></a>');
			$('a.here').attr('href', xxad).text('Вы плохо справились с тестом');	
		}	
		else if(score == questions.length){
		document.write('Вот ваша ссылка -' + '<a class="here"></a>');
			$('a.here').attr('href', xxad).text('Вы ответили на все вопросы');	

		}
		else{
		document.write('Вот ваша ссылка -' + '<a class="here"></a>');
			$('a.here').attr('href', xxad).text('Вы хорошо справились с тестом');	
		}
		document.write('<h1>Все сайты 2</h1>')
	</script>
</body>
</html>

Написано более трёх лет назад

Stalker_RED @Stalker_RED

JackShcherbakov: Если не секрет, какого года книга? document.write настораживает.

Написано более трёх лет назад
JackShcherbakov @JackShcherbakov Автор вопроса

Stalker_RED: 2016-го. А что в нем плохого? Просто я особо не разбираюсь, пока что.

Написано более трёх лет назад
Stalker_RED @Stalker_RED

JackShcherbakov: https://learn.javascript.ru/document-write

Написано более трёх лет назад
JackShcherbakov @JackShcherbakov Автор вопроса

Stalker_RED: Спасибо большое!

Написано более трёх лет назад

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы

JavaScript

+2 ещё

Простой
Как сделать плавное появление скрытых под display: none; карточек по клику на кнопку, при подключеной AOS?
- 1 подписчик
- 12 часов назад
- 76 просмотров
1

ответ
JavaScript

+4 ещё

Сложный
Почему в WebSockets History в Burp Suite отображаются кракозябры?
- 1 подписчик
- вчера
- 77 просмотров
2

ответа
JavaScript

Простой
Как выводить JS код?
- 2 подписчика
- вчера
- 983 просмотра
1

ответ
JavaScript

Простой
Как заставить срабатывать trigger change в Select2?
- 1 подписчик
- вчера
- 51 просмотр
0

ответов
JavaScript

Простой
Почему появляется ошибка Uncaught Reference?
- 1 подписчик
- 20 дек.
- 83 просмотра
2

ответа
JavaScript

Средний
Порождается ли событие в элементе или оно само по себе?
- 1 подписчик
- 20 дек.
- 95 просмотров
1

ответ
JavaScript

+2 ещё

Средний
Как можно изменить настройки модуля навигации карт Google на Яндекс карты?
- 2 подписчика
- 19 дек.
- 206 просмотров
2

ответа
JavaScript

+2 ещё

Простой
Как исправить вёрстку, чтобы блок с изображением не уезжал из-за блока с описанием?
- 1 подписчик
- 19 дек.
- 101 просмотр
0

ответов
JavaScript

+1 ещё

Простой
Как загрузить img в первой очереди при загрузке страницы?
- 1 подписчик
- 19 дек.
- 92 просмотра
1

ответ
JavaScript

+2 ещё

Средний
Какие есть высокоуровневые компонентные javascript фреймворки?
- 1 подписчик
- 19 дек.
- 171 просмотр
1

ответ
Показать ещё Загружается…

JavaScript FullStack разработчик

Rocket • Смоленск

от 80 000 до 130 000 ₽

JavaScript Fullstack

OnClass

от 2 000 до 7 000 $

JavaScript FullStack developer

Wanted. • Санкт-Петербург

До 220 000 ₽

Разработать телеграм бота с реферальной системой, Юкассой и ChatGPT

23 дек. 2024, в 02:13

20000 руб./за проект

Собрать из исходного кода и запустить в докере рабочее приложение с бд

22 дек. 2024, в 22:57

500 руб./за проект

Аппликация для фильтра заказов

22 дек. 2024, в 20:40

10000 руб./за проект

Answer 1 · 2017-07-07 02:27:57

Событие DOMContentLoaded ( в jQuery $(document).ready()) происходит когда загружен весь HTML и построен DOM.
Событие window.load - когда загружен весь HTML, построен DOM, загружены и применены все стили и изображения (то есть намного позже).

И зачем вообще все это, если все и без этого работает?

Если у вас и так всё работает - не используйте. Однажды появится ситуация, что вы пытаетесь повесить обработчик на форму, а она еще не загружена - придется использовать DOMContentLoaded. Или однажды нужно будет скриптом учесть высоту какого-то блока, но стили еще не прогрузились - тогда воспользуетесь window.load. А пока и так работает, зачем лишний раз изображать карго культ?

Answer 2 · 2017-07-07 02:29:27

вообще-то не работает.. Если к обратится к элементу через js когда его ещё не существует, тоесть весь DOM не загрузился, то ничего не получится. нужно подождать когда он загрузится а потом уже к нему обратится и что-то с ним делать.
'после ready' DOM уже создан и уже можно обратиться к элементам, после load не только DOM создан но и всё всё всё загружено пользователем, картинки итп.. в случае с ready пользователю виден только <img> как тег, а в случае load уже и как картинка на экране.
Примерно вот так...

Почему мы иногда пишем document.ready а иногда нет? В чем отличие от window.load?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт