CODEWITHSUNDEEP
javascripthtmldom
Amin Hemati Nik
Amin Hemati Nik

Reputation: 517

placing <script> tags right before </body> doesn't work as expected

Im watching a tutorial in which the mentor suggests that in order to improve the user experience it is better to add <script> tags right before the </body> , so the script runs after the page content is fully loaded.

I try this block of code and I expect to see the "hello world!" before any script runs but my browser runs the javascript before everything else shows up (displays only a blank page with the alert box) 

<html>
 <body>

  <p>hello world!</p>

  <script>
   alert('hey there');
  </script>

 </body>
</html>

I tried this with safari/chrome/opera and got the same result. I know I can use jQuery to solve this but can someone explain this behaviour?

Thanks to @T.J.Crowder , I marked the correct answer, just in case anyone is curious about what is happening under the hood I've found a good explanation here: Script is before /body but it runs before page is loaded

Upvotes: 1

Views: 2123

Answers (3)

T.J. Crowder
T.J. Crowder

Reputation: 1074295

...so the script runs after the page content is fully loaded.

Correct, all the elements above it are parsed and in the DOM — but, the browser may or may not have had a chance to render them yet. To give it a chance to do so, through a very small delay into your code.

    <script>
    setTimeout(function() {
        alert('hey there');
    }, 50);
    </script>
</body>

Live Example:

<p>hello world!</p>
<script>
setTimeout(function() {
    alert('hey there');
}, 50);
</script>

That adds a 50ms delay — nothing a human being is going to notice. But if you want the absolute minimum delay:

    <script>
    requestAnimationFrame(function() {
        setTimeout(function() {
            alert('hey there');
        }, 0);
    });
    </script>
</body>

Live Example:

<p>hello world!</p>
<script>
requestAnimationFrame(function() {
    setTimeout(function() {
        alert('hey there');
    }, 0);
});
</script>

More:

Those won't wait for all images and such to load, though. If you want to wait for everything (which could be a long way), use the window load event, see that link or this answer for examples.

Upvotes: 1

Exceptional NullPointer
Exceptional NullPointer

Reputation: 788

You can use

document.addEventListener("DOMContentLoaded", function() {
  alert('hey there');
});

It is the vanilla js equivalent of jquery document ready

Edit: main difference from window onload in Nisarg Shah's answer that this doesnt wait until the site is fully loaded (external styles, images etc)

Upvotes: 0

Nisarg Shah
Nisarg Shah

Reputation: 14541

When a script tag is placed at the bottom of the body tag, it simply means that the rest of the DOM is processed before the script runs. It does not guarantee that the page has fully rendered.

You can use the load event to ensure that the page has rendered:

<html>
 <body>

  <p>hello world!</p>

  <script>
   alert('hey there');
   
   window.onload = function() {
      alert("Page has rendered");
   };
  </script>

 </body>
</html>

Upvotes: 0

Related Questions