Каков порядок выполнения в HTML с JavaScript?

Я начинаю JavaScript. Может ли кто-нибудь объяснить, в каком порядке строки line1, line2 и line3 выполняются в моем коде? Я думал, что сначала должен показать абзац на веб-сайте (строка 1), а затем показать изображение (строка 2) и, наконец, сделать запрос.Каков порядок выполнения в HTML с JavaScript?

Однако произошло то, что он сначала показывает абзац (строка 1) и делает запрос (строка 2). После того, как приглашение получит некоторый ввод, изображение отображается. Почему это?

Мой код выглядит следующим образом:

<!DOCTYPE html> 
<html> 
    <head> 
    </head> 
    <body BGCOLOR = "white"> 
     <p>paragraph 1</p> <!--line 1--> 
     <img name = "img1" src = "http://vignette2.wikia.nocookie.net/ironman/images/e/e3/Iron_man_the_game_1.jpg/revision/latest?cb=20100520163628"> <!--line 2--> 
     <script type = "text/javascript"> 
      var index = parseInt(prompt("enter a number",1));//line3 
     </script> 
    </body> 
</html>

источник

2015-04-23 lienahu

Это потому, что изображение занимает некоторое время, чтобы загрузить.

line1, line2 и line3 на самом деле выполняются по порядку, это просто, что строка 2 не выполняется, чтобы восстановить ее образ к моменту появления подсказки. и затем, страница зависает, ожидая завершения этого запроса.

, если вы хотите, чтобы убедиться, что изображение показывает перед запросом приходит, просто сделать это (обратите внимание, чистый JavaScript, не JQuery, так как вы новичок)

<!DOCTYPE html> 
<html> 
    <head> 
    </head> 
    <body BGCOLOR = "white" onload="loadprompt()"> 
     <p>paragraph 1</p> // line 1 
     <img name = "img1" src = "http://vignette2.wikia.nocookie.net/ironman/images/e/e3/Iron_man_the_game_1.jpg/revision/latest?cb=20100520163628"> // line2 
     <script type = "text/javascript"> 
     function loadprompt(){ 
       var index = parseInt(prompt("enter a number",1));//line3 
    } 
     </script> 
    </body> 
</html>

посмотреть здесь: http://www.w3schools.com/jsref/event_onload.asp

источник

2015-04-23 23:30:24

Спасибо за объяснение! – lienahu

Rendering, как правило, прогрессивный, так что вы должны увидеть пункт 1, то при загрузке IMG он будет отображаться, то подскажите, потому что вы не запустить этот скрипт на событие , например, когда страница будет загружена.

Однако приглашение является блокирующим действием пользовательского интерфейса. Скорее всего, ваш образ еще не загружен при срабатывании подсказки. Запрос заставит браузер просто сидеть там, пока пользователь ничего не сделает, поэтому, даже если изображение загружается в течение времени запроса, оно не будет отображаться до тех пор, пока пользовательский интерфейс не будет разблокирован действием пользователя.

Смотрите этот же вопрос: Does inline javascript block the UI thread?

источник

2015-04-23 23:23:53

Спасибо за объяснение! – lienahu

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

<script type = "text/javascript"> 
    $(document).ready(function() { 
    var index = parseInt(prompt("enter a number",1)); 
    } 
</script>

Вам будет также нужно добавить это, как это использует jQuery (вы можете загрузить jQuery и поместить url в свою копию в качестве src здесь, если вы по какой-либо причине хотите запустить свой сайт в автономном режиме);

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

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

источник

2015-04-23 23:25:51

Это использование jQuery. –

, что еще более важно, не объясняет, почему, просто давая решение, если это проблема –

Ханлет, извините, что я сделал сейчас редактирование. Кай, я написал, что он делает, и это всего лишь одна лишняя строка jQuery на читаемом английском языке, поэтому я предположил, что это достаточно объяснений, извините! Я новичок здесь –

Каков порядок выполнения в HTML с JavaScript?

ответ

Смежные вопросы