Detect whether external script has loaded

Question

Using JavaScript, is there a way to detect whether or not an external script (from a third-party vendor) has completely loaded?

The script in question is used to pull in and embed the markup for a list of jobs and, unfortunately, doesn't make use of any variables or functions. It uses document.write to output all of the content that gets embedded in my page.

Ideally, I'd like to display some kind of loading message while I'm waiting for the external script to load, and if it fails to load, display a "We're sorry, check back later..." message.

I'm using jQuery on the site, but this external script is called before I make the jQuery call.

Here's what the document.write stuff from the external script looks like:

document.write('<div class="jt_job_list">');
document.write("
    <div class=\"jt_job jt_row2\">
        <div class=\"jt_job_position\">
            <a href=\"http://example.com/job.html\">Position Title</a>
        </div>
        <div class=\"jt_job_location\">City, State</div>
        <div class=\"jt_job_company\">Job Company Name</div>
    </div>
");

[This](https://stackoverflow.com/a/74420159/9971404) is a modern way to do it. — lonix, Nov 13 '22 at 10:46

Phillip Schmidt · Answer 1 · 2012-08-21T15:44:21.510

14

Attach an function to the load event:

<script type="text/javascript" src="whatever.js" onload ="SomeFunction()" />

As far as your loading... problem goes, try displaying a div for loading and then just display:none-ing it in your onload function. Make sure to handle cases where your script fails to load too, though.

edited Aug 21 '12 at 15:44

answered Aug 21 '12 at 15:38

Phillip Schmidt

8,805
3
43
67

`onload` doesn't fire for my scripts. Dont know why! – Pouria Moosavi Aug 25 '22 at 10:32

Nick · Answer 2 · 2012-08-21T15:46:29.620

Script tags block downloads, so as long as the content dependent on your script is below where your script it loaded, you should be fine. This is true even if the script is in-line in the body of your page.

This website has a great example of how this works.

This obviously does not work if you're loading the scripts asynchronously.

Scripts without async or defer attributes are fetched and executed immediately, before the browser continues to parse the page.

Source: MDN

score 2 · Answer 3 · answered Aug 21 '12 at 15:41

2

You could put a script block after it on the page:

<script src="external_script.js"></script>
<script type="text/javascript">
    ExternalScriptHasLoaded();
</script>

answered Aug 21 '12 at 15:41

Shmiddty

13,847
1
35
52

brilliant, but have you solution when `async = true` ? – pery mimon Apr 27 '17 at 06:45

score 2 · Accepted Answer · answered Aug 21 '12 at 18:14

Thanks for the assistance above, especially ngmiceli for the Steve Souders link!

I decided to take what's probably a "lazy" approach, and also forego the "loading" message:

$(document).ready(function(){
    if ($('.jt_job_list').length === 0){
        $('#job-board').html("<p>We're sorry, but the Job Board isn't currently available. Please try again in a few minutes.</p>");
    };
});

Pretty simple, but I'm looking to see if an element with the .jt_job_list class is in the dom. If it isn't, I display an error message.

score 1 · Answer 5 · answered Feb 28 '17 at 03:44

This worked for me: it does however, rely on the newer querySelector interface which most modern browsers support. But if you're using really old browsers, you can use getElement... and run a for loop.

function loadJS(file, callback, error, type) {
    var _file = file ;
    var loaded = document.querySelector('script[src="'+file+'"]') ;

    if (loaded) {
      loaded.onload = callback ;
      loaded.onreadystatechange = callback;
      return
    }

    var script = document.createElement("script");

    script.type = (typeof type ==="string" ? type : "application/javascript") ;

    script.src = file;
    script.async = false ;
    script.defer = false ;
    script.onload = callback ;

    if (error) {
       script.onerror = error ;
       }
    else {
       script.onerror = function(e) {
              console.error("Script File '" + _file + "' not found :-(");
              };
       }

    script.onreadystatechange = callback;

    document.body.appendChild(script);
}

score 0 · Answer 6 · edited Aug 21 '12 at 15:44

0

You could give what ever your looking for an ID

and check whether not the ID has been loaded using document.getElementById("ID");

Is that what your looking for not sure I fully understand?

edited Aug 21 '12 at 15:44

scunliffe

62,582
25
126
161

answered Aug 21 '12 at 15:38

Lemex

3,772
14
53
87

Detect whether external script has loaded

6 Answers6

Linked