CODEWITHSUNDEEP
javascriptpageload
Aaron
Aaron

Reputation: 3669

Loading Javascript and checking once it has loaded

I am using the following JavaScript code and I am trying to find out once the file has been downloaded and added to the header of my page:

function loadjscssfile(filename, filetype)
{
    if (filetype=="js"){ //if filename is a external JavaScript file
        var fileref=document.createElement('script')
            fileref.setAttribute("type","text/javascript")
            fileref.setAttribute("src", filename)
    }
    else if (filetype=="css"){ //if filename is an external CSS file
        var fileref=document.createElement("link")
            fileref.setAttribute("rel", "stylesheet")
            fileref.setAttribute("type", "text/css")
            fileref.setAttribute("href", filename)
    }
    if (typeof fileref!="undefined")
        document.getElementsByTagName("head")[0].appendChild(fileref)
}



loadjscssfile("jquery.js","js");

I normally use the following code to find out once my image has loaded:

    document.getElementById("header_logo").src = "logo.png"; // load top logo

var header_logo = document.getElementById("header_logo"); 
    header_logo.onload = function(e) {  
    // do something here, the file has loaded
}

but I can't work out how to check once my JS has been loaded..

Any ideas?

(I can't use jQuery.)

Upvotes: 1

Views: 602

Answers (2)

RobG
RobG

Reputation: 147493

In HTML 4.01 the load event was onlly supported by body and frameset elements, though many support it for img elements and some for script elements.

In HTML5, script elements have beforescriptexecute, afterscriptexecute and load events that are dispatched at relevant times in the script element's life. However, support for those events is likely not available in many browsers in use so not to be relied upon.

The most robust way to see if a script has loaded is to test for a value of a variable that is assigned a value by the last bit of code to be executed, e.g. final statements like:

var loadedScripts = loadedScripts || {};
loadedScripts.fooScript = true;

Then you can test for it:

if (loadedScripts.fooScript) {
  // loaded

} else {
  // not loaded
}

Upvotes: 0

Michael Robinson
Michael Robinson

Reputation: 29508

You could add a function to the onload event:

function loadjscssfile(filename, filetype, onload) {
    //if filename is a external JavaScript file
    if (filetype == "js") { 
        var fileref = document.createElement('script');
        fileref.type = "text/javascript");
        fileref.onload = onload;
        fileref.src = filename);
        document.getElementsByTagName("head")[0].appendChild(fileref);
        return;
    }

    //if filename is an external CSS file
    if (filetype == "css") { 
        var fileref = document.createElement("link");
        fileref.rel = "stylesheet";
        fileref.type = "text/css";
        fileref.onload = onload;
        fileref.href = filename;
        document.getElementsByTagName("head")[0].appendChild(fileref);
        return;
    }
}



loadjscssfile("jquery.js","js", function() { alert(this.src); });

Upvotes: 1

Related Questions