Hi, I am include a huge javascript file(500K) in my HTML. Is there a smart way to know if it has been loaded. One way I can think of is to have a variable in its constructor to initialize and inform me . The loading is asynchronous and I cannot proceed until function s of that JS are included.
Thanks
Have you tried compressing the javascript file? Moving some of the functions into separate Javascript files, and only including the needed javascript?
By using jQuery you can handle a callback function that runs when the script file is loaded:
$.getScript("yourScriptFile.js", function(){
// What to do when the script is loaded
});
You could call a function at the end of the script file which would inform the script on the page that it's ready for use.
As an clarification on Oscar's answer:
<script type='text/javascript' src='script.js'></script>
<script type='text/javascript'>
alert('the file has loaded!');
//Anything here will not be executed before the script.js was loaded
</script>
Also if the file is huge, it might be better to load it after the page has loaded, so that you, on slow connections can use the page before it's loaded:
<head> <script type='text/javascript' src='script.js'></script> </head> <body> Nothing here will be rendered until the script has finished loading </body>
Better is to:
<head> </head> <body> I will be rendered immidiatly </body> <script type='text/javascript' src='script.js'></script> </html>
That way users get the page fast and only then have to wait for the javascript functionality.
Perhaps the question may be restated: how do I know my script is loaded in a html-page? Placing the script at the bottom of the page you make sure all the DOM-elements are available to your script. When you want to know if your script is available, you should check if the function to run is available. Maybe this constructor can help:
function Wait(what,action,id){
var _x = this,
rep = document.getElementById('report'),
cnt = 0,
timeout = 5,
interval = 100;
_x.id = id;
if (!(what instanceof Function)) {
return true; //or say something about it
}
function dowait() {
cnt += interval;
if (what())
{
clearInterval(_x.iv);
action();
return true;
}
if (cnt>(timeout*1000))
{
clearInterval(_x.iv);
//[do some timeout-action]
return true;
}
}
_x.iv = setInterval(dowait,interval);
}
The constructor takes a function (returning a boolean) as its first argument. Like
function(){return document.getElementById('someelement').innerHTML = '';}
So if you include this before your javascript, you can do something like:
var testfn =
function(){return document.getElementById('someElement').innerHTML = '';},
callback =
function(){alert('someElement is empty')},
dummy = null;
window.onload=function(dummy=new Wait(testfn,calllback);