Why doesn't dynamically added script block the rest of the page from loading

Question

I have a simple page:

<!DOCTYPE html>
<html>
<head>
  <script>
    func = function(message) {
       alert(message);
    }
  </script>
</head>
<body>
  <h1> Visible content </h1>
</body>
</html>

and a script which is in separate file -- let's say -- test.js:

func("It should block the page.");

When I simply add this script to head by typing:

<script src="test.js"></script>

Alert shows before the content is visible which is fine to me.
However when I add the script dynamically:

<script>
  var script = document.createElement('script');
  script.setAttribute('type', 'text/javascript');
  script.setAttribute('src', 'test.js');
  document.getElementsByTagName('head')[0].appendChild(script);
</script>

Alert shows after the content.

Why does that happen? Shouldn't the browser wait untill the script finishes (including adding and loading a new one)? Is it possible to block the body content with dynamically added script?

your dom (Document Object Model) isn't ready. Your code is executed before the elements on the page rendered. You have to use dom ready event, for example in jquery we use `$(document).ready(..code..);` — Dvir, Oct 14 '13 at 22:08

score 1 · Accepted Answer · edited May 23 '17 at 11:57

1

It happens because of asynchronous loading. Have a look at the article: http://css-tricks.com/thinking-async/

It depends what do you mean by blocking. You can load the page with the content block hidden: <div style="display:none;"></div> and show it after the page is loaded.

Here's jQuery way:

$(function () {
    // do stuff after DOM has loaded
});

Have a look at this answer for more: javascript domready?

edited May 23 '17 at 11:57

Community

1
1

answered Oct 14 '13 at 22:17

Pavel

542
5
11

I've already figured out such solution, hoped there is some other way. Anyway thanks for explaining asynchronous loading ;) – PGJ Oct 15 '13 at 07:03

score -1 · Answer 2 · answered Oct 14 '13 at 22:09

-1

Wrap it in document.ready:

$(document).ready(function () {
  var script = document.createElement('script');
  script.setAttribute('type', 'text/javascript');
  script.setAttribute('src', 'test.js');
  document.getElementsByTagName('head')[0].appendChild(script);
});

answered Oct 14 '13 at 22:09

mayabelle

9,804
9
36
59

It does not answer the question! – epascarello Oct 14 '13 at 22:22

Why doesn't dynamically added script block the rest of the page from loading

2 Answers2