Sometimes in a web app, you'll want to load a script externally. The only problem is if you need to reference something within the external library, which you should only do once it's definitely loaded.

Here's a tip that works with all browsers to ensure the script is loaded before running your dependant code.

READER DISCOUNTSave $50 on terminal.training I've published 38 videos for new developers, designers, UX, UI, product owners and anyone who needs to conquer the command line today. $49 - only from this link

Here's the JavaScript code to load the external library with a callback passed in:

function loadExtScript(src, callback) { var s = document.createElement('script'); s.src = src; document.body.appendChild(s); // if loaded...call the callback }

Firefox allows you to listen for the onload event on the script element:

s.onload = callback;

With Internet Explorer you can wait for a state change on the script element:

s.onreadystatechange = function() { if ( this.readyState != "loaded" ) return; callback.call(); }

The problem comes with Safari - there's no event change for Safari, so we can't tell when the script has loaded.

This is the solution I came up with (and this solution should also work with Opera):

function loadExtScript(src, test, callback) { var s = document.createElement('script'); s.src = src; document.body.appendChild(s); var callbackTimer = setInterval(function() { var call = false; try { call = test.call(); } catch (e) {} if (call) { clearInterval(callbackTimer); callback.call(); } }, 100); }

The function takes a test as a parameter. Since you are the designer of the app, you'll know what successful test is. Once this test is true, it will execute the callback.

A simple test could be to check whether a function exists, for example: