CODEWITHSUNDEEP
javascriptonload
hmahdavi
hmahdavi

Reputation: 2354

How to recognize that one js file loaded?

I try to display progress bar when page loading. I want change width of progress bar after js files loaded .At the final after load all documents set with of progress bar to 100% .Now I need to recognize js files loading with javascript. Is this possible ? Please advice.

Upvotes: 0

Views: 113

Answers (2)

Arman Ozak
Arman Ozak

Reputation: 2344

If you know at least one defined namespace (almost all libraries and plugins have it: e.g. jQuery, jQuery.ui, jQuery.mobile, toastr, DataTable, etc.) or one global variable name introduced by the script files which are being loaded, then you can do this:

(function(undefined) {
    var scriptFilesLoaded = false,
        files = [],
        timer = setInterval(function(){
            try {
                files = [
                    jQuery, 
                    jQuery.mobile, 
                    jQuery.ui,
                    someGlobalVariableName
                ];
                if(files.indexOf(undefined)<0){
                    scriptFilesLoaded = true;
                    clearInterval(timer);
                }
            }
            catch(e) {
                console.warn('Preloader in action: Script files not loaded yet.');
            }
        },200);
})();

It doesn't matter if the script file is remote or local.

Upvotes: 1

Mikhail Tulubaev
Mikhail Tulubaev

Reputation: 4261

For internal js files loading recognition:

As functions and variables can be accessed from another file you can set the value of global progress variable and display it's value by calling the function

//on page or head js file
var progress = 0;

function displayProgress()
{
//show progress based on 'progress' variable
}
//file1.js
progress += 10;
displayProgress();
...
//file2.js
progress += 20;
displayProgress();
...

For external js files there is good article. The main idea is to periodically check existense of external functions (typeof fixpng =='function') and if it exist - stop checking and display progress.

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:

loadExtScript('/fixpng.js', function() {   return (typeof fixpng ==
'function'); }, myCallbackFunction);

Upvotes: 3

Related Questions