Resource loading: onload and onerror

The browser allows us 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 load a third-party script and call a function that resides there. We can load it dynamically, like this: …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: 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 is down (unavailable).

script.onerror

Errors that occur during the loading of the script can be tracked in an error event. For instance, let’s request a script that doesn’t exist: Please note that we can’t get HTTP error details here. We don’t know if it was an error 404 or 500 or something else. Just that the loading failed.

Other resources

The load and error events also work for other resources, basically for any resource that has an external src. For example: There are some notes though: - Most resources start loading when they are added to the document. But is an exception. It starts loading when it gets a src (*). - For