19/01/2019
Resource loading: onload and onerror
The browser allows to track the loading of external resources – scripts, iframes, pictures and so on.
There are two events for it:
onload – successful load,
onerror – an error occurred.
Loading a script
Let’s say we need to call a function that resides in an external script.
We can load it dynamically, like this:
let script = document.createElement('script');
script.src = "my.js";
document.head.append(script);
…But how to run the function that is declared inside that script? We need to wait until the script loads, and only then we can call it.
script.onload
The main helper is the load event. It triggers after the script was loaded and executed.
For instance:
let script = document.createElement('script');
// can load any script, from any domain
script.src = "https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.3.0/lodash.js"
document.head.append(script);
script.onload = function() {
// the script creates a helper function "_"
alert(_); // the function is available
};
So in onload we can use script variables, run functions etc.
…And what if the loading failed? For instance, there’s no such script (error 404) or the server or the server is down (unavailable).
script.onerror
Errors that occur during the loading (but not ex*****on) of the script can be tracked on error event.
For instance, let’s request a script that doesn’t exist:
let script = document.createElement('script');
script.src = "https://example.com/404.js"; // no such script
document.head.append(script);
script.onerror = function() {
alert("Error loading " + this.src); // Error loading https://example.com/404.js
};
Please note that we can’t get error details here. We don’t know was it error 404 or 500 or something else. Just that the loading failed.
Other resources
The load and error events also work for other resources. There may be minor differences though.
For instance:
, (external stylesheets)
Both load and error events work as expected.
Only load event when the iframe loading finished. It triggers both for successful load and in case of an error. That’s for historical reasons.
