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

Question

JackShcherbakov @JackShcherbakov

JavaScript

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

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

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

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

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

Подписаться 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 ещё

Средний
Возможно ли расположить или чтобы блок div мог заходить в прозрачный фон png фота?
- 1 подписчик
- 54 минуты назад
- 13 просмотров
1

ответ
JavaScript

+3 ещё

Средний
Как сделать выборку mongo?
- 1 подписчик
- час назад
- 19 просмотров
0

ответов
JavaScript

Средний
Запись в cookie или localStorage только при открытии страницы?
- 1 подписчик
- 2 часа назад
- 30 просмотров
3

ответа
JavaScript

+2 ещё

Средний
Правильно ли настроен webpack.config для PWA приложения?
- 1 подписчик
- 3 часа назад
- 20 просмотров
0

ответов
JavaScript

+3 ещё

Простой
Почему приходят пустые данные с формы на почту?
- 1 подписчик
- 7 часов назад
- 50 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Как при помощи js создать поле дополнительных ингридиентов?
- 1 подписчик
- 17 часов назад
- 77 просмотров
0

ответов
JavaScript

+1 ещё

Средний
Как в Next.js закешировать изображение без build?
- 1 подписчик
- 19 часов назад
- 32 просмотра
0

ответов
JavaScript

Простой
Как поставить лайк на все комментарии видео в тикток?
- 1 подписчик
- вчера
- 141 просмотр
2

ответа
JavaScript

Простой
Как нажать на все блоки с данным классом на странице с помощью JS?
- 1 подписчик
- вчера
- 101 просмотр
1

ответ
JavaScript

+1 ещё

Простой
Как повторить такую же анимацию?
- 2 подписчика
- вчера
- 306 просмотров
1

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

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

SummerWeb • Ярославль

от 100 000 до 140 000 ₽

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

вАйТи

от 5 000 до 25 000 ₽

Middle JavaScript Developer

AppsTrain.io

от 80 000 до 180 000 ₽

Протестировать виджет на личном сайте

26 апр. 2024, в 18:00

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

Установить систему Linux

26 апр. 2024, в 17:24

2000 руб./в час

Перенести базу знаний в формат lms (На подобии Obsidium)

26 апр. 2024, в 17:02

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

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?

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

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

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