handle external javascript script loaded event before it's executed

Question

I have an html page and a script which I want to handle in specific way: after it's loaded but before it's executed. Basically I want to pre-load script but execute when certain criteria met. Script doesn't depend on other scripts so I make it non-blocking (async):

<script onload='onScripLoad()' scr='...' async></script>

All I want is something similar to onload but which is executed before the downloaded script. Is it possible?

The issue here is that I'm able to pre-load the script but unable to sync with the required event in my app lifecycle. The onScripLoad is executed after script has been loaded AND after it has been executed. What I need is to have control when script is executed (postpone execution).

Adding more details I want to pre-load the script and execute it when certain element is available in the body but I cannot put the script right after that element because in this case it gets queued with a few other resources which are being downloaded in the head. Thus I want to place my script in the head, make it async and once it's downloaded execute only when specific element is available (or event create that element before executing). I cannot make it not async because it's a script which I have no control and wouldn't like my whole page depend on it.

Can't you put the code in the external script in a function and then only call that function once both conditions are true? — nnnnnn
– nnnnnn, Commented Mar 16, 2017 at 1:46
Can't you just house the logic in the external script in a function, which gets loaded early, and then call that function from a secondary script when a certain condition is true? — Obsidian Age
– Obsidian Age, Commented Mar 16, 2017 at 1:48
That is how I would do it if I have control over the external script. Unfortunately it's a 3d party library and it has certain javascript which is executed right after begin downloaded. — Mando
– Mando, Commented Mar 16, 2017 at 21:17

Obsidian Age · Accepted Answer · 2017-03-16 02:18:34Z

2

You could just load the external script in the head section, wrap the logic inside a function, and then call that function inside a condition at a later point:

externalscript.js:

function externalFunction(data) {
  console.log(data);
}

Index:

<head>
  <script src='externalscript.js' async></script>
</head>
<body>
  <script>
  var body_data = 'test';
  if (timing-driven-condition) {
    externalFunction(body_data);
  }
  </script>
</body>

The function externalFunction would be loaded first, but wouldn't be used until it was called within the condition, giving you control over when it executes.

Hope this helps! :)

edited Mar 16, 2017 at 2:18

answered Mar 16, 2017 at 1:57

Obsidian Age

42.6k11 gold badges54 silver badges76 bronze badges

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

3 Comments

nnnnnn Over a year ago

"The function externalFunction would be loaded immediately" - Even with the async attribute?

Obsidian Age Over a year ago

I meant it would be loaded first :P

Mando Over a year ago

That is how I would do it if I have control over the external script. Unfortunately it's a 3d party library and it has certain javascript which is executed right after begin downloaded.

Collectives™ on Stack Overflow

handle external javascript script loaded event before it's executed

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related