HTML валидатор - "async" is not a member of a group specified for any attribute

@Igorsrt · Регистрация: 08.09.2015

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

Здравствуйте!
Задался целью "полностью понравиться" валидатору .w3.org, и практически достиг ее...
Но потом задался еще одной целью - понравиться google-speed, а они просят загружать js скрипты после основного контента. Поэтому для подключения jQuery решил использовать асинхронную загрузку..
Но теперь, опять ругается валидатор:

HTML5

1 2	Line 12, Column 42: "async" is not a member of a group specified for any attribute <script type="text/javascript" async src="/js/jquery-1.4.3.min.js"></script>

Можно ли как-то эту ошибку убрать?

@mrtoxas · 19.03.2017, 09:43

Какой доктайп стоит?

@Igorsrt · 19.03.2017, 09:46 **[ТС]**

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

Какой доктайп стоит?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

@mrtoxas · 19.03.2017, 09:49

Тогда используйте или defer, или подключайте библиотеку перед закрывающим тегом </body>.
async пришёл к нам с HTML5

@Igorsrt · 19.03.2017, 09:53 **[ТС]**

с defer у меня не работает... т.е. другие скрипты, которые я перенес в футер не запускаются без JQuery... ((
А может быть можно этот doctipe исправить?

@mrtoxas · 19.03.2017, 09:59

Попробуйте

HTML5

1	<!DOCTYPE html>

@Igorsrt · 19.03.2017, 10:09 **[ТС]**

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

Попробуйте

HTML5

1	<!DOCTYPE html>

...попробовал... какие-то новые ошибки вылезли (и вид у валидатора изменился - так и должно быть?)

Warning: Legacy encoding windows-1251 used. Documents should use UTF-8.

Warning: Consider avoiding viewport values that prevent users from resizing documents.
From line 9, column 2; to line 9, column 89
-Type"/>↩ <meta content="initial-scale=1, width=device-width, user-scalable=no" name="viewport" />↩ <met
Error: The align attribute on the div element is obsolete. Use CSS instead.
From line 113, column 8; to line 113, column 27
">↩ <div align="center">↩
Error: Bad value top-menu-cell1-m for attribute id on element div: An ID must not contain whitespace.
From line 153, column 13; to line 153, column 40
<div id="top-menu-cell1-m ">↩
Error: The align attribute on the div element is obsolete. Use CSS instead.
From line 157, column 4; to line 157, column 23
l2-m">↩ <div align="center">↩ <t
Error: The align attribute on the div element is obsolete. Use CSS instead.
From line 187, column 4; to line 187, column 23
:1em">↩ <div align="center">↩ <t
Error: The align attribute on the div element is obsolete. Use CSS instead.
From line 245, column 1; to line 245, column 20
y:none;">↩<div align="center">Готовы
Warning: The language attribute on the script element is obsolete. You can safely omit it.
From line 276, column 1; to line 276, column 53
age-mob">↩<script language="javascript" type="text/javascript">↩//<![
Error: The align attribute on the div element is obsolete. Use CSS instead.
From line 372, column 3; to line 372, column 22
</div>↩ <div align="center">↩ <d
Error: The align attribute on the div element is obsolete. Use CSS instead.
From line 386, column 3; to line 386, column 22
div>↩ ↩ <div align="center">↩ <d

@mrtoxas · 19.03.2017, 10:14

Ну да, валидатор говорит, что надо использовать современные подходы. И ошибки, например, что нельзя использовать пробелы в наименовании идентификаторов.

Добавлено через 1 минуту
Вы ваш доктайп откуда взяли?

@Igorsrt · 19.03.2017, 10:23 **[ТС]**

Сайт старый, самописный движок на php... вот, попросили "оптимизировать"..
даже не знаю, как теперь лучше поступить... ну вот, допустим, я эти ошибки исправлю, а при смене кодировки windows-1251 на UTF-8 кракозябры не полезут из базы вместо букв?

@mrtoxas · 19.03.2017, 10:48

По поводу кодировки вам валидатор выдал предупреждение, а не ошибку.
Если сайт времен царя Гороха, то надо не оптимизировать его, а переписывать.

Добавлено через 14 минут
Так сработает:

PHP/HTML

<body>
    <script>
    window.onload = function(){
        $("#h1").html("Hello World");
    }    
    </script>
    <h1 id="h1"></h1>
    <script src="jquery-3.2.0.min.js"></script>
</body>

@Igorsrt · 19.03.2017, 11:02 **[ТС]**

Извините, не соображу пока... что тут в этом коде нового? и где async ?

@mrtoxas · 19.03.2017, 11:06

Библиотека подключается перед закрывающим тегом </body>, как валидатор и хочет, а скрипты на странице будут ждать полной загрузки документа.

Добавлено через 2 минуты
Даже не валидатор, а google-speed

@Igorsrt · 19.03.2017, 11:08 **[ТС]**

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

Библиотека подключается перед закрывающим тегом </body>, как валидатор и хочет, а скрипты на странице будут ждать полной загрузки документа.

Добавлено через 2 минуты
Даже не валидатор, а google-speed

т.е. в верху страницы нужно вставить

HTML5

<script>
    window.onload = function(){
        $("#h1").html("Hello World");
    }    
    </script>

a jQuery подключать уже внизу, после контента?
Еще раз извините, что, возможно, "туплю"... )

@mrtoxas · 19.03.2017, 11:13

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

другие скрипты, которые я перенес в футер не запускаются без JQuery

Я вам показал на примере, когда jQuery подключена в конце документа, но скрипты в самом документе отрабатывают нормально.
Ваша же цель не влепить async любой ценой, а загрузка js скриптов после основного контента.

@Igorsrt · 19.03.2017, 11:24 **[ТС]**

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

Я вам показал на примере, когда jQuery подключена в конце документа, но скрипты в самом документе отрабатывают нормально.
Ваша же цель не влепить async любой ценой, а загрузка js скриптов после основного контента.

ну да, я так и понял... просто уточняю: что бы можно было подключить jQuery в конце страницы и другие скрипты "ждали" его загрузки (т.е. полной загрузки страницы) нужно вставить в начале следующий код:

HTML5

<script>
    window.onload = function(){
        $("#h1").html("Hello World");
    }    
    </script

Так, или я недопонял?

@mrtoxas · 19.03.2017, 11:40

Я не знаю, что вы поняли. Я так же не знаю что там у вас за скрипты. Поэтому я написал скрипт для примера - $("#h1").html("Hello World");, чтобы можно было наглядно убедиться, что код работает, даже если подключать библиотеку в конце документа. Если вам нужно в каждый заголовок вставлять "Hello World", тогда да, вставляйте его.
Без window.onload этот код не работал бы, потому что браузер до загрузки библиотеки не знает еще, что такое $("")).
К прочтению: Загрузка документа.

Добавлено через 7 минут
В общем, выходы в вашей ситуации:
1. Забить на предупреждение google-speed об подключении скриптов в конце страницы.
2. Если вы хотите использовать async - меняем доктайп. Но тогда в валидаторе повылазит куча ошибок.
3. Подключать скрипты в конце документа, указывая тем скриптам, которые зависят от библиотеки, работать после загрузки этой самой библиотеки.

@Igorsrt · 19.03.2017, 12:05 **[ТС]**

Кажется понял Вашу мысль, спасибо... "window.onload=" нужно добавить в скриптах, которые используют jQury - тогда они будут выполняться после полной загрузки страницы (и, соответственно, jQuery, даже если он будет подгружаться в конце)

@Igorsrt · 20.03.2017, 15:28 **[ТС]**

у меня вот такой скрипт на странице:

HTML5

<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#carousel').jcarousel({vertical: false, scroll: 2});
});
</script>

Как тут "подставить" "window.onload=" ?

@mrtoxas · 20.03.2017, 15:33

Javascript

1
2
3

window.onload = function(){
   jQuery('#carousel').jcarousel({vertical: false, scroll: 2});
}

@Igorsrt · 20.03.2017, 15:49 **[ТС]**

Супер, все работает, спасибо... ))
.. правда не очень красиво получается: сначала загружается куча картинок на страницу, а потом они "перестраиваются" в карусель... с async как-то "поаккуратней" выглядело

Добавлено через 8 минут
.. но зато гугл-спиду нравится!!! ))))

@mrtoxas 3825 / 2675 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	19.03.2017, 11:40	16
	Сообщение было отмечено mrtoxas как решение Решение Я не знаю, что вы поняли. Я так же не знаю что там у вас за скрипты. Поэтому я написал скрипт для примера - `$("#h1").html("Hello World");`, чтобы можно было наглядно убедиться, что код работает, даже если подключать библиотеку в конце документа. Если вам нужно в каждый заголовок вставлять "Hello World", тогда да, вставляйте его. Без `window.onload` этот код не работал бы, потому что браузер до загрузки библиотеки не знает еще, что такое `$("")`). К прочтению: Загрузка документа. Добавлено через 7 минут В общем, выходы в вашей ситуации: 1. Забить на предупреждение google-speed об подключении скриптов в конце страницы. 2. Если вы хотите использовать async - меняем доктайп. Но тогда в валидаторе повылазит куча ошибок. 3. Подключать скрипты в конце документа, указывая тем скриптам, которые зависят от библиотеки, работать после загрузки этой самой библиотеки. 0

@mrtoxas 3825 / 2675 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	19.03.2017, 09:43	2
	Какой доктайп стоит? 0

@Igorsrt 0 / 0 / 0 Регистрация: 08.09.2015 Сообщений: 28
	19.03.2017, 09:46 [ТС]	3
	Сообщение от mrtoxas Какой доктайп стоит? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 0

@mrtoxas 3825 / 2675 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	19.03.2017, 09:49	4
	Тогда используйте или defer, или подключайте библиотеку перед закрывающим тегом </body>. async пришёл к нам с HTML5 2

@Igorsrt 0 / 0 / 0 Регистрация: 08.09.2015 Сообщений: 28
	19.03.2017, 09:53 [ТС]	5
	с defer у меня не работает... т.е. другие скрипты, которые я перенес в футер не запускаются без JQuery... (( А может быть можно этот doctipe исправить? 0

@mrtoxas 3825 / 2675 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	19.03.2017, 10:14	8
	Ну да, валидатор говорит, что надо использовать современные подходы. И ошибки, например, что нельзя использовать пробелы в наименовании идентификаторов. Добавлено через 1 минуту Вы ваш доктайп откуда взяли? 0

@Igorsrt 0 / 0 / 0 Регистрация: 08.09.2015 Сообщений: 28
	19.03.2017, 10:23 [ТС]	9
	Сайт старый, самописный движок на php... вот, попросили "оптимизировать".. даже не знаю, как теперь лучше поступить... ну вот, допустим, я эти ошибки исправлю, а при смене кодировки windows-1251 на UTF-8 кракозябры не полезут из базы вместо букв? 0

@Igorsrt 0 / 0 / 0 Регистрация: 08.09.2015 Сообщений: 28
	19.03.2017, 11:02 [ТС]	11
	Извините, не соображу пока... что тут в этом коде нового? и где async ? 0

@mrtoxas 3825 / 2675 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	19.03.2017, 11:06	12
	Библиотека подключается перед закрывающим тегом </body>, как валидатор и хочет, а скрипты на странице будут ждать полной загрузки документа. Добавлено через 2 минуты Даже не валидатор, а google-speed 0

@mrtoxas 3825 / 2675 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	19.03.2017, 11:13	14
	Сообщение от Igorsrt другие скрипты, которые я перенес в футер не запускаются без JQuery Я вам показал на примере, когда jQuery подключена в конце документа, но скрипты в самом документе отрабатывают нормально. Ваша же цель не влепить async любой ценой, а загрузка js скриптов после основного контента. 0

@Igorsrt 0 / 0 / 0 Регистрация: 08.09.2015 Сообщений: 28
	19.03.2017, 12:05 [ТС]	17
	Кажется понял Вашу мысль, спасибо... "window.onload=" нужно добавить в скриптах, которые используют jQury - тогда они будут выполняться после полной загрузки страницы (и, соответственно, jQuery, даже если он будет подгружаться в конце) 0

@Igorsrt 0 / 0 / 0 Регистрация: 08.09.2015 Сообщений: 28
	20.03.2017, 15:49 [ТС]	20
	Супер, все работает, спасибо... )) .. правда не очень красиво получается: сначала загружается куча картинок на страницу, а потом они "перестраиваются" в карусель... с async как-то "поаккуратней" выглядело Добавлено через 8 минут .. но зато гугл-спиду нравится!!! )))) 0

HTML валидатор - "async" is not a member of a group specified for any attribute

Решение