Run inline script after loading async resources

Question

I tested my page with an optimizer, and it suggests me to use the async attribute for all CDN sources that I use, like for instance:

<script async src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

To run any script I use:

(function(){

})();

I also have JavaScript code in inline script tags that reference such libraries. However, when I add async as above, I get an error in the following script:

<script>
    (function(){
        jQuery.foundation();
        ReactDOM.render(<App />,document.querySelector('#app'));
    })();
</script>

I've tried adding async to this script tag as well, but it still doesn't work. I still get an error that the library loaded with the async attribute doesn't exist.

trincot · Accepted Answer · 2017-08-24 20:15:22Z

Wrapping your code in:

(function () {
})();

... does not delay its execution. To delay your script until resources have been loaded, wait to the window load event:

The load event fires at the end of the document loading process. At this point, all of the objects in the document are in the DOM, and all the images, scripts, links and sub-frames have finished loading.

Here is an example that loads jQuery with a <script async> element, and shows the jQuery version via the inline script:

window.addEventListener('load', function () {
    console.log(jQuery.fn.jquery);
});

<script async src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

To capture the event when a particular async script has been loaded, you could listen to its own load event. For that to work it is probably the easiest if you give an id to the script element of your interest, and make sure the inline code comes after it:

jq.addEventListener('load', function () {
    console.log(jQuery.fn.jquery);
});

<script id="jq" async src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Note that the async (and defer) attributes have no effect on inline scripts:

The defer and async attributes must not be specified if the src attribute is not present.

They only have an effect on script elements that have the src attribute.

felixmosh · Accepted Answer · 2020-02-25 18:44:34Z

9

If I understood your problem correctly, you want to run inline script when the async script tag is loaded.

You can use onload event of the script tag.

function runInline() {
  console.log('inline script run')
}

<script async src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" onload="runInline()"></script>

edited Feb 25, 2020 at 18:44

answered Aug 24, 2017 at 20:11

felixmosh

35.9k10 gold badges81 silver badges99 bronze badges

3 Comments

Sello Mkantjwa Over a year ago

Slightly misleading. This will fire when the entire document is loaded vs just the async script.

felixmosh Over a year ago

Pay attention to the async attribute

Sello Mkantjwa Over a year ago

> The load event fires at the end of the document loading process. At this point, all of the objects in the document are in the DOM, and all the images, scripts, links and sub-frames have finished loading. developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/… This seems to suggest it does it not matter?

Collectives™ on Stack Overflow

Run inline script after loading async resources

2 Answers 2

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related