javascript - How to execute code after "deferred" script is loaded and executed? - Stack Overflow

admin管理员组

文章数量:1023112

If scripts are loaded synchronously (incl. jQuery), then startup code I use is the following:

<script>
    $(window).load(function () {
        // some startup code
    });
</script>

Now scripts are deferred:

<script defer type="text/javascript" src="//cdnjs.cloudflare/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script defer type="text/javascript" src="...

How do I rewrite my startup code so it executes after deferred scripts are loaded and processed?

If scripts are loaded synchronously (incl. jQuery), then startup code I use is the following:

<script>
    $(window).load(function () {
        // some startup code
    });
</script>

Now scripts are deferred:

<script defer type="text/javascript" src="//cdnjs.cloudflare./ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script defer type="text/javascript" src="...

How do I rewrite my startup code so it executes after deferred scripts are loaded and processed?

• javascript
• deferred

Share Improve this question Follow asked Jan 27, 2020 at 18:54 Denis KulaginDenis Kulagin 8,9871919 gold badges7171 silver badges137137 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

The approach I've used is to listen to the 'load' event of that specific script tag - once it's done and good to go, the event will fire.

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

<script defer id='theScript' type="text/javascript" src="//cdnjs.cloudflare./ajax/libs/jquery/2.1.4/jquery.min.js"></script>

this of course is easier by simply adding an onload to the tag

<script defer src="foo.js" onload="callback()"></script>

Your callback can trigger an event. Theoretically you can use the DOMContentLoaded event but I've had some trouble with js not being fully available when this fires

If scripts are loaded synchronously (incl. jQuery), then startup code I use is the following:

<script>
    $(window).load(function () {
        // some startup code
    });
</script>

Now scripts are deferred:

<script defer type="text/javascript" src="//cdnjs.cloudflare/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script defer type="text/javascript" src="...

How do I rewrite my startup code so it executes after deferred scripts are loaded and processed?

If scripts are loaded synchronously (incl. jQuery), then startup code I use is the following:

<script>
    $(window).load(function () {
        // some startup code
    });
</script>

Now scripts are deferred:

<script defer type="text/javascript" src="//cdnjs.cloudflare./ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script defer type="text/javascript" src="...

How do I rewrite my startup code so it executes after deferred scripts are loaded and processed?

• javascript
• deferred

Share Improve this question Follow asked Jan 27, 2020 at 18:54 Denis KulaginDenis Kulagin 8,9871919 gold badges7171 silver badges137137 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

The approach I've used is to listen to the 'load' event of that specific script tag - once it's done and good to go, the event will fire.

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

<script defer id='theScript' type="text/javascript" src="//cdnjs.cloudflare./ajax/libs/jquery/2.1.4/jquery.min.js"></script>

this of course is easier by simply adding an onload to the tag

<script defer src="foo.js" onload="callback()"></script>

Your callback can trigger an event. Theoretically you can use the DOMContentLoaded event but I've had some trouble with js not being fully available when this fires

本文标签： javascriptHow to execute code after quotdeferredquot script is loaded and executedStack Overflow