2016-01-12 3 views
3

Имея код ниже:Defer атрибут и OnLoad событие

<html> 
    <head> 

     <script>    
      function elem_onload() { 
       console.log("elem_onload"); 
      };  
     </script> 

    </head> 

    <body onload="elem_onload()">  
     <script type="text/javascript" src="script.js" defer></script>  
    </body> 
</html> 

script.js:

console.log("external script"); 

атрибут Defer не кажется, работает. Выходной сигнал:

external script 
elem_onload 

ли с атрибутом отсрочки или без него. Shoudn't it

elem_onload 
external script 

с отсрочкой определено?

Дублированный ответ !?

Я хотел бы заявить, что мой ответ не дубликат

How exactly does <script defer=“defer”> work?

ссылаются, рекомендуется ответ о инлайн сценарии, где поведение браузера ясно для меня - это просто игнорирует defer. Мой вопрос о внешнем скрипте, в этом случае браузер должен выполнить Внешний Отложенный скрипт

после того, как документ был разобран

в документации государств, следовательно, после onload события.

Так я жду подходящего ответа ...

+1

[4.21.1 Элемент сценария] (https://html.spec.whatwg.org/multipage/scripting.html#attr-script-defer): «Существует три возможных режима, которые могут быть выбраны с использованием этих атрибутов. Если присутствует асинхронный атрибут, скрипт будет выполнен, как только он будет доступен, но не будет блокировать дальнейший синтаксический анализ страницы. ** Если атрибут async отсутствует, но присутствует атрибут defer, тогда выполняется сценарий когда страница закончила синтаксический анализ **. Если ни один из атрибутов не присутствует, сценарий извлекается и выполняется немедленно, прежде чем пользовательский агент продолжит анализ страницы « – Andreas

+0

Итак, вы предполагаете, что событие« onload »всегда запускается, когда страница была проанализирован и, следовательно, после отложенного сценария? – Mulligan81

+0

Попробуйте установить 'type' и' src' '' при закрытии 'elem_onload' – guest271314

ответ

3

Внешний сценарий отложила атрибутом defer выполняется перед (DOMContentLoaded) обжигают, то есть, когда первоначальный HTML документ был полностью загружен и разобрался. С другой стороны, атрибут onLoad на теге <body> срабатывает только при полной загрузке веб-страницы.

Следовательно, атрибут defer действительно работает. Вы можете проверить это, попробовав два случая ниже. В обоих случаях содержание script.js файл должен быть таким:

console.log(document.getElementById('sample').innerHTML); 

СЛУЧАЙ 1 HTML - с defer -> журналы "Пример текста"

<body onLoad="elem_onload()">  
<script type="text/javascript" src="script.js" defer></script>  
<div id="sample">Sample text</div> 
</body> 

СЛУЧАЙ 2 HTML - без defer -> журналы ошибки

<body onLoad="elem_onload()">  
<script type="text/javascript" src="script.js"></script>  
<div id="sample">Sample text</div> 
</body> 
+2

Выполняются ** до того, как **' DOMContentLoaded' уволен – Andreas

+0

Спасибо @Andreas –

+1

Порядок здесь определен -> ['12.2.6 The end'] (https://html.spec.whatwg.org/multipage/syntax.html#the-end) – Andreas

0

Thx. все для помощи.

Итак, утверждение «после анализа документа» из оригинала документа. (MDN <script> tag) относится сказать шаг # 0 от 12.2.6 The end

, когда документ полностью разобран, и теперь есть несколько задач, которые предстоит сделать по этому поводу.Эти задачи включают запуск внешних отложенных сценариев, которые предшествуют (№ 3) до onload.

Я прав?

+0

Да. Событие загрузки запускается на шаге 7. –