Javascript loading in head

Question

I'm new to Javascript and I'm using this code to call out a javascription function:

<body onload="replaceLinks()">

This was placed right under my body tag. The problem is, it executes after the page loads and that's not fast enough for what I'm trying to accomplish.

How can I put that in the head of the document so it loads first?

Thank you!

<script>
function replaceLinks() {
    var links = document.querySelectorAll('.restore a:link');
    for (var i = 0; i < links.length; i++) {
        if (/\.(jpg|gif|png|jpe?g)$/.test(links[i].href)) continue;
        links[i].innerHTML = '<a href="/register.php" class="guestbutton">DOWNLOAD VIDEO</a>';
        links[i].href = 'register.php';
    }
}
</script>

Could to explain what you want replaceLinks() to accomplish? — David Ehrmann
– David Ehrmann, Commented Apr 10, 2014 at 19:09
What would replaceLinks() be able to replace before the page loads? — Dave Newton
– Dave Newton, Commented Apr 10, 2014 at 19:10
@AD7six That's not quite true; you can modify DOM elements as soon as they're in the DOM (if you have a way to get them), but it usually takes a <script> tag after each element you want to modify. — David Ehrmann
– David Ehrmann, Commented Apr 10, 2014 at 19:11
Hey guys, this is what the function is. Any idea what I should do? It replaces the links in my content with a registration message. <script> function replaceLinks() { var links = document.querySelectorAll('.restore a:link'); for (var i = 0; i < links.length; i++) { if (/\.(jpg|gif|png|jpe?g)$/.test(links[i].href)) continue; links[i].innerHTML = '<a href="/register.php" class="guestbutton">DOWNLOAD VIDEO</a>'; links[i].href = 'register.php'; } } </script> — user1446650
– user1446650, Commented Apr 10, 2014 at 19:33

Scimonster · Accepted Answer · 2014-04-10 19:12:49Z

1

Put the JS in the head, not as a function, but as an immediately executing statement (or an IIFE if you want to prevent variable leakage). Then, don't call it from <body onload>.

However, if your function modifies the DOM, you need to wait until the DOM (or relevant sections) has finished loading.

answered Apr 10, 2014 at 19:12

Scimonster

33.4k10 gold badges79 silver badges92 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user1446650 Over a year ago

Can you see my updated post? I'm not sure if it will work, or what exactly my code needs to look like to be an "immediately executing statement". ANy help is appreciated. Thank you!

Scimonster Over a year ago

Looking at the update, it won't work before the document is loaded in any case.

Community · Accepted Answer · 2020-06-20 09:12:55Z

it executes after the page loads and that's not fast enough for what I'm trying to accomplish.

The onload event will wait for the page to be loaded - depending on what your page is doing that may be a signifiant delay.

Scripts in the head aren't what you want

A script which modifies the content of the page must wait for the content it wants to modify to exist. That doesn't mean waiting for document ready though.

So, for example, this will not work:

<html>
  <head>
    <script>
        function replaceLinks() {
          var links = document.querySelectorAll('.restore a:link');
          for (var i = 0; i < links.length; i++) {
            if (/\.(jpg|gif|png|jpe?g)$/.test(links[i].href)) continue;
              links[i].innerHTML = '<a href="/register.php" class="guestbutton">DOWNLOAD VIDEO</a>';
              links[i].href = 'register.php';
            }
          }
          replaceLinks(); // run the replace function
    </script>
  </head>
  <body>
    <a class="restore" href="#">A link</a>
  </body>
</html>

It won't work because when replaceLinks is called the links it should modify don't exist yet.

Put your script at the end of the page

It is a generally-held best practice to put scripts at the end of the page. I.e. for the example in the question like so:

<html>
  <head>
  </head>
  <body>
    <a class="restore" href="#">A link</a>
    <script>
        function replaceLinks() {
          var links = document.querySelectorAll('.restore a:link');
          for (var i = 0; i < links.length; i++) {
            if (/\.(jpg|gif|png|jpe?g)$/.test(links[i].href)) continue;
              links[i].innerHTML = '<a href="/register.php" class="guestbutton">DOWNLOAD VIDEO</a>';
              links[i].href = 'register.php';
            }
          }
          replaceLinks(); // run the replace function
    </script>
  </body>
</html>

In this way, the content it wants to modify already exists when it runs, and it runs as soon as the script tag is parsed.

Note that the function does not need to be in the same script block, it simply needs to be defined before being called (it could be declared in the head - but there's no reason to do that).

However, don't use javascript for that

There are a number of problems with what's proposed in the question though:

The page's original contents will be displayed first, and then replaced with "DOWNLOAD VIDEO" links. I.e. similar to FOUC
Users can access the links by either reading the source or simply disabling javascript

As such, it would be much more appropriate to not use javascript for this task and modify the contents on the server before sending to the client.

Collectives™ on Stack Overflow

Javascript loading in head

2 Answers 2

2 Comments

Scripts in the head aren't what you want

Put your script at the end of the page

However, don't use javascript for that

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Scripts in the head aren't what you want

Put your script at the end of the page

However, don't use javascript for that

Comments

Your Answer

Sign up or log in

Post as a guest

Related