Javascript: Is there a way to detect when all asynchronous scripts are loaded?

If you use simple script tags on an HTML page, rendering is blocked until the script is loaded and parsed. To avoid this, to display the page faster, you can add the "async" attribute, which tells the browser to continue processing the page without waiting for the script. However, this essentially means that another javascript that references anything in this script is likely to crash because the required objects do not yet exist.

As far as I know, there is no allScriptsLoaded event that you can bind to, so I'm looking for ways to simulate it.

I know the following strategies to delay the launch of another code until an async script is available:

  • For a single script, use your event or onload attribute. However, there is no built-in way that I know to tell when ALL scripts are loaded, if there are more than one.
  • Run all the dependent codes in the onload event handlers attached to the window. However, they are waiting for all the images too, and not just all the scripts, so starting later than will be ideal.
  • Use the loader library to load all scripts; they usually provide a callback to start when everything is loaded. The downside (besides the need for a library for this, which must be loaded earlier), is that all the code must be completed with a (usually anonymous) function that you pass to the loader library. This is in contrast to just creating a function that runs when the mythical allScriptsLoaded is triggered.

Am I missing something, or is it a state of art?

+4
source share
1 answer

, , , - (XMLHttpRequest, setTimeout, setInterval, SetImmediate, process.nextTick, Promise) , . , , - javascript , , . , . , ( io.js frisky).

, script script. (.. , script .)

, DOM NoAsyncPending -, .

0

Source: https://habr.com/ru/post/1605817/


All Articles