Forum Moderators: open
Your users will get errors if they start clicking or do anything that results in calls to javascript functions that aren't loaded yet.
The first and obvious thing to do is to weed out unneeded code. If all 400kb of that file isn't needed on the page that calls it, then pull it out of there. Remove comments from your production version of the file.
If your home/default page doesn't have this javascript overhead, then another relatively easy thing you can do is to break up the file(s) into smaller ones. Add references to some of the files on pages leading upto the ones that actually need it. The browsers will fetch the files the first time they encounter the references. After that, they will send HEAD requests and find out that the cached version is up to date.
One last option, one that I've done, is to build a file "check-in" mechanism to track whether each file is finished loading or not. Set the initial cursor for the page to "wait". When all files are finished loading, then change the cursor to the default cursor.
I still have a copy of that project, so I will post the functions I used to do this in a subsequent post.
The following function call was added as the last line of each external javascript file:
fileLoaded('filename.js');
The existing body onload attribute was modified from this:
onload="someFunction();"
to this:
onload="waitForFileLoad('someFunction();')"
Next, add a little (more) javascript to the HEAD region of your page. This just declares an array with the names of the external javascript files. There is an example at the top of...
Lastly, this code is from, of all things, another external javascript file. Save it to a file, then make that file the FIRST externally referenced file
<!--
//Declare jsFcFileList directly in the header of the HTML that is utilizing these functions.
//Example: var jsFcFileList=new Array('file1','file2');
var jsFcWaitCount=0;
var jsFcCancel=false;
var jsFcCode='';
function fileLoaded(filename)
{
var chk=filename.toLowerCase();
for(var i=0;i<jsFcFileList.length;i++)
{
if(jsFcFileList[i]==chk)
{
jsFcFileList[i]=null;
break;
}
}
}
function allFilesLoaded()
{
for(var i=0;i<jsFcFileList.length;i++)
{
if(jsFcFileList[i]!=null)
return false;
}
return true;
}
function waitForFileLoad(code)
{
var i;
if(code)
jsFcCode=code;
if(allFilesLoaded()¦¦jsFcCancel)
{
window.status='Ready';
if(jsFcCode.length>0)
{
var lines=jsFcCode.split(';');
for(i=0;i<lines.length;i++)
{
if(lines[i].length>0)
{
eval(lines[i]);
}
}
}
document.body.style.cursor='auto';
return;
}
document.body.style.cursor='wait';
if(jsFcWaitCount<2)
{
var dots='';
for(i=0;i<jsFcWaitCount;i++)
dots+='.'
window.status='Checking supporting file status'+dots;
jsFcWaitCount=jsFcWaitCount+1;
setTimeout('waitForFileLoad()',500);
}else{
window.status='One or more supporting files have not loaded!';
if(confirm('One or more javascript support files have not loaded.\n\nClick "OK" to continue waiting, or click "Cancel" to stop.\n\nIf you Cancel, you may need to reload this page (F5 function key) before it will work properly.'))
{
jsFcWaitCount=1;
window.status='Checking supporting file status';
setTimeout('waitForFileLoad()',500);
}else{
document.body.style.cursor='auto';
jsFcReportFileList();
jsFcCancel=true;
waitForFileLoad(jsFcCode);
}
}
return;
}
function jsFcReportFileList()
{
for(var i=0;i<jsFcFileList.length;i++)
{
if(jsFcFileList[i]!=null)
jsErrArray[jsErrArray.length]='Not Loaded: '+jsFcFileList[i];
}
return;
}
//-->
-
In 400KB js file, All I have is document.write lines
I have put some <SELECT>s I use widely in a js and and added as an external file in my pages. This external js file is generated automatically based on some xml content which rarely changes. There are no functions in the js file. Say I have a big js file containing lots of <SELECT>s in it I do not know which of them is going to be used in which page, so I insert this big file in my pages. Besides, out of thousands of users few faces this problem. A user who encounters this problem, after corrected, may never face it again, or face few hours later. One more thing, I got script errors on my other small .js files either.
Can you tell me more about how to build a file "check-in" mechanism to track whether each file is finished loading or not. Set the initial cursor for the page to "wait".
It is like this
<HTML><HEAD>
...
smallsc1.js
smallsc2.js
smallsc3.js
.....
</HEAD>
BODY
FORM
.....
....
smallsc4.js
BIGsc.js
BODY
HTML
