View Full Version : On-screen display while loading a large .js file

03-31-2003, 06:09 PM
This is my index.html:

<!-- index.html 3.27.03 -->
<title>Food Calories & Nutrition Calculator</title>
<frameset rows="100%,*,*" frameborder=no border=0 framespacing=0>
<frame name="image" src="index_image.html" scrolling=yes>
<frame name="create" src="index_create.html" scrolling=no>

"image" exists as a simple page reading, "Loading food list..." It displays while the food list is being loaded.

"create" loads the food list, a huge .js file, and then re-creates "image."

This works fine on my next door neighbors PC. If I make the food list huge, "loading food list..." displays for maybe 45 seconds. If I make it small, maybe 10 seconds or less.

But on my PC (and we both use IE), the "Loading food list..." only appears for a second or so just before "create" re-creates "image." If I make the food list huge, the same thing happens and during the 45 second load time my PC continues to display the page from which I am linking.

I don't understand this. I would think it would always immediately display the prevously created "image" until it is re-created by "create."

Thanks for your ideas, Peter

03-31-2003, 06:20 PM
This would be much more easy to debug if you included the actual script as well ;-)

We aren't psychics that can read your mind, you know - even if our previous answers may have led you think so.

03-31-2003, 06:28 PM
My only hesitation is that it's HUGE. Is that okay to post?

03-31-2003, 06:41 PM
Take out the parts relevant to just this - and if it's still too large, either give us a link or put it in an attachment.

(I'm surprised nobody jumped at that and said "Talk for yourself!" or something like it...)

03-31-2003, 06:41 PM
no, post the source code for the "create" page

03-31-2003, 06:46 PM

Do you have a more powerful PC? More memory CPU Speed. That could explain the speed differences.

You may be better of creating a Dynamic Dropdown List rarther than trying to create a huge string that contains all the HTML for the drop down.

try a search for "Dynamic Drop Down".

Also, what problem are you trying to solve? The speed question or the fact that sometimes for you the loading message doesn't display?

03-31-2003, 07:00 PM
By "the parts relevant to just this" i meant the create script...

03-31-2003, 07:02 PM
Roy, I'm trying to solve the problem that on my PC the "Loading food list..." image doesn't display until the last second or so.

I meant the "create" page was huge. Well, I'll just post most of it. I have deleted much, though.

I think the relevant things are the function makeImage() and the very bottom of the page. Also the loading of the huge "list_food_030401.js" file just below.

Liorean, about being psychics... I am sooo greatful for the help I get here and it resolves 99% of my problems. The others I work around. But I've been posting on and off about one question for over two years and still can't figure out if what I want to do is possible or not. (Conditionally load .js files so I don't either have to load them all into memory at once (e.g., my different food lists) or have different webpages for each list.) I can never figure out whether the replies I get are solid solutions which I just can't make work or just guesses that don't work. So I wouldn't say psychics! But I really do appreacite all the help I get so please I hope you don't think I'm being rude or ungrateful with this comment.

<!-- index_create_food.html 4.1.03 -->

<script language="JavaScript"></script>
<script src="common.js"></script>
<script src="common_help.js"></script>
<script src="list_food_030401.js"></script>
<script src="list_mcdonalds_030327.js"></script>
<script language="JavaScript">

// Function to change food list
function changeList(){
if (V==80){top.location.href='index_burn.html'}
if (V==81 | V==82){saveCookie1y("listCookie",V,X1y); v=V; selectNum=0; makeImage()}
if (V==90){top.location.href='email.html'};
if (V==91){top.location.href='help_food.html'};
if (V==92){top.location.href='help_search.html'}}

// Calculate function
function Calculate(){

// Function to make image frame
function makeImage(){
if (getCookie("listCookie")==null){v=81}
else {v=getCookie("listCookie")}
c+="<style type='text/css'><!-- a:link, a:visited, a:active {text-decoration:none} --></style>";
// Set links and background
c+="<body link='#0000cc' alink='#0000cc' vlink='#0000cc' ";
if (brType=="WebTV"){c+="bgcolor='#ccccff'>"}
else {c+="background='backgrounds/";
if (bacNum==1){c+="lockerGray.gif'>"}
if (bacNum==2){c+="lockerBlue_BIO.gif'>"}
if (bacNum==3){c+="lockerPink.gif'>"}
if (bacNum==4){c+="lockerArmy_LIN.gif'>"}}
// Table for entire page
// Space at top of page
if (brType=="WebTV" | scReso=="low"){}
else {c+="<tr><td height=30></td></tr>"}
// Calculator Panel
c+="<tr><td align=center>";
c+="<table border=1 bgcolor='#ffffff' ";
if (brType=="WebTV"){c+="cellpadding=4>"}
else {c+="cellpadding=5>"}
// Panel title
c+="<tr><td align=center>"+tf+tsh+tcp;
c+="Food ";
if (mC=="ca"){c+="Calories"} else {c+="Kilojoules"}
c+=" & Nutrition Calculator<br>"+tf+tsr+tcp+cr;
// Food menu
c+="<tr><td align=center>";
c+="<form name=f1>";
c+="<select name=list onFocus='parent.create.makeSound(\"drip.au\",1)' ";
c+="onChange='parent.create.makeSound(\"drop.wav\",1); parent.create.changeList()'>";
if (v==82){c+=m} else {c+=l}
// Servings menu
c+="<tr><td align=center>";
c+="<input type=text name=servings value="+S+" size=3 maxlength=4 border=1>";
if (scReso=="low" | brType=="WebTV"){sp="&nbsp; &nbsp; &nbsp;"} else {sp="&nbsp; &nbsp; &nbsp; &nbsp;"}
// Weight entry
if (mW=="kg"){
c+="<input type=text name=kg value="+Kg+" onChange='parent.create.setKg(this)' ";
c+="size=3 maxlength=3 border=1> kg"}
if (mW=="st"){
c+="<input type=text name=st value="+St+" onChange='parent.create.setSt(this)' ";
c+="size=2 maxlength=2 border=1> st"}
if (mW=="st"){c+="&nbsp;&nbsp;"}
if (mW=="st" | mW=="lb"){
c+="<input type=text name=lb value="+Lb+" onChange='parent.create.setLb(this)' ";
c+="size=3 maxlength=3 border=1> lb"}
// Search field
// Line 636 lllll
c+="<input type=text name=search value='"+searchText+"' ";
if (brType=="MIE"){c+="onKeyDown='parent.create.checkKey()' "}
if (brType=="WebTV"){if (mW=="st"){c+="size=11"} else {c+="size=15"}}
else {if (mW=="st"){c+="size=17"} else {c+="size=25"}}
c+=" maxlength=25 border=1>";
// Calculate button
c+="<tr><td align=center>";
c+="<a href='javascript:parent.create.Calculate()' ";
c+="onMouseOver='parent.create.chgImg(\"calcButton\",\"squintMan25\"); ";
c+="parent.create.undoImgOverOthers(1); ";
c+="parent.create.chgImg(\"newButton\",\"leftMan\"); ";
c+="parent.create.chgImg(\"printButton\",\"leftMan\"); ";
c+="parent.create.chgImg(\"searchButton\",\"leftMan\"); ";
c+="parent.create.makeSound(\"ouch.au\",1)' ";
c+="onMouseout='parent.create.chgImg(\"calcButton\",\"blinkMan25\"); ";
c+="parent.create.undoImgOutOthers(); ";
c+="parent.create.chgImg(\"newButton\",\"blinkMan25\"); ";
c+="parent.create.chgImg(\"printButton\",\"blinkMan25\"); ";
c+="<img src='buttons/blankMan.gif' height=35 width=35 ";
c+="name='calcButton' align=absmiddle border=0></a> Calculate";
// Search button
c+="<a href='javascript:parent.create.Search()' ";
c+="onMouseOver='parent.create.chgImg(\"searchButton\",\"upMan\"); ";
c+="parent.create.chgImg(\"calcButton\",\"rightMan\"); ";
c+="parent.create.undoImgOverOthers(2); ";
c+="parent.create.chgImg(\"newButton\",\"rightMan\"); ";
c+="parent.create.chgImg(\"printButton\",\"rightMan\"); ";
c+="parent.create.makeSound(\"boink_low.au\",1)' ";
c+="onMouseout='parent.create.chgImg(\"searchButton\",\"blinkMan25\"); ";
c+="parent.create.chgImg(\"calcButton\",\"blinkMan25\"); ";
c+="parent.create.undoImgOutOthers(); ";
c+="parent.create.chgImg(\"newButton\",\"blinkMan25\"); ";
c+="<img src='buttons/blankMan.gif' height=35 width=35 ";
c+="name='searchButton' align=absmiddle border=0></a> Search";
// Display panel
if (brType=="WebTV"){c+="<font size=1>"}
if (brType!="WebTV"){c+="<b>"}
if (setList==0 & search==0){c+=startText}
else if (search==1){c+=searchDisplay}
else {c+=display}
if (brType!="WebTV"){c+="</b>"}
// Links
c+="<tr><td align=center>";
s="&nbsp; •&nbsp; ";
c+="<a href='faqs.html' target='_top' ";
c+="title='Q&A about Diet and Weight Loss, Calories and our Calculators'>";
c+="<a href='tips.html' target='_top' ";
c+="title='Look Better, Feel Better, Be Healthier'>Fat Loss Tips</a>"+s;
c+="<a href='index.html' target='_top' title='Home Page'>Home</a>"+s;
c+="<a href='help_food.html' ";
c+="target='_top' title='Instructions, Parameter Selections, Problems'>Help</a>"+s;
c+="<a href='about.html' target='_top' title='About this Website'>About</a>"+s;
c+="<a href='email.html' target='_top' title='E-Mail Us'>E-mail</a>";
// Note
note=0; // turned off
if (note==1){
c+="<tr><td align=center>";
c+="<img src='graphics/newArrow_w26h19.gif' align=absmiddle>xxx<a href='javascript:parent.create.noteJump()'>Important note for return visitors!</a>"}
// Ad
if (ad==1){
c+="<p align=center>";
c+="<a href='javascript:parent.create.adJump()' title='Go! Go! Go!'>";
c+="<img src='graphics/ad_310x35_flash25.gif' border=3></a>"}
// Note about new calculator
if (V==81){
c+="<p align=center>";
c+="<table bgcolor='#ffffff' width=55% border=1><tr><td>"+tf+tsr+tcp;
c+="This is new and the list is still small, but I wanted to have people try it and give me their comments.";

// Create index_image_food.html
</head><body bgcolor='#999999'>
<script language="JavaScript">

03-31-2003, 07:07 PM
Try this.

Change your frameset to load a blank document in the "create" frame
Change your index_image_food.html to have an onLoad handler that sets the create frame to the index_create_food.html

Something like
<body onLoad="top.frames.create.document.location='index_create_food.htm'l">
(I am not sure if that is the correct syntax)

Using an onload handler should make sure the image is displayed before the create page starts running its code.

04-01-2003, 04:36 PM
Roy, I went to try your idea and my problem isn't happening today.

Either my PC is behaving differently due to some obscure reason; I changed some little thing in my coding that affected this (though I don't think I did); or I don't know what.

I'll try your coding if/when it happens again. Right now it sits displaying the original image "Loading food list..." until it loads it and then re-creates the page. Just what I want. ???

Thanks, Peter

04-02-2003, 02:48 AM
Roy, my browser started acting up again (hanging on the existing screen image while waiting for my huge .js file to be loaded) so I tried your idea. Unfortunately it didn't help.

I sent it off to an entirely different file like you suggested, but it still didn't go there until the .js file was loaded. And then it just wrote over that file...like it should. But that "Loading food list..." file still never got displayed during the long loading period.

Thanks, Peter

Roy Sinclair
04-02-2003, 08:44 PM
Not related to the direct problem but to answer what you stated was a long-standing query, you can conditionally load JS files. The key is in using javascript to write the appropriate <script></script> tags depending on your test condition. The key things to watch out for is that you have to break up the tag so the browser doesn't choke on it as it writes it. In other words, while it would be easiest to go:

if (true)
{ document.write "<script ...></script>"; }

You have to write it like this:

if (true)
{ document.write "<" + "script ...><" + "/script>"; }

Don't let the browser see <script> or </script> as a single string within your code.

04-02-2003, 09:00 PM
Roy, that seems very logical. I've seen it choke when I first tried it.

It almost seems too easy, too! I'm too busy now but I am excited to try it tonight.

I will eventually have a number of large .js files all to be used at times by the same page. If I can get this to work, I will just re-create the page and load the appropriate .js file each time a different one is needed. Now I am loading ALL the .js files whether I use them or not.

My only other alternative was to create separate webpages for each .js file and then change webpages.


04-02-2003, 10:02 PM
Well, I couldn't wait till tonight and tried it and it works great. When I initially come to the webpage it loads JUST the .js file I used last time (identified by a cookie) or loads the default .js file on a user's first visit. I'm very happy to have it working.

I don't have time to play with it now, but I see I have another problem to work out.

If I were to Reload the page when I want a different .js file it would work now. But I don't want to do that because I don't want to lose the values of many variables in memory (in another Frames page you don't see).

So when I want a different .js file I just re-create the page. I think my error messages are because I am trying to document.write to ADD the new .js file but stepping on the entire page.

Is there a way to add the new .js file to memory (i.e., to the other frames page you don't see that creates the one you do see and stores these variables)? Can I write this additional .js file to it without stepping on it entirely?

Thanks so much, Peter

Roy Sinclair
04-03-2003, 03:46 PM
If you only want to replace a part of the page then you could wrap that part of the page in a div and use the innerHtml function to rewite the contents of that div. Since that could include a script tag it should work. If you want to just add content to the page without replacing any existing content you need to use the DOM to create and add a div element which you can then use as above in fact the DOM may even allow you to directly insert a script element, you should ask about that in the DOM forum here. I'm not an expert on that but JKD the moderator there seems to be exceptionally good at it.

Bottom line, what you want should be possible, it's just figuring out the exact details.

04-05-2003, 09:36 AM
Hi Roy,

I don't mean to seem disrespectful to your suggestion but learning about DOM seems too much for me right now so I'm still thinking about other ways. After all, it's only been two years I've been working on this problem! Haha.

As I wrote before, I've got your stealth code working quite well. The problem being that I don't want to Reload the page and lose all my variables from memory.

I got this idea tonight to put your code not at the top of the page where it's only seen upon Reload, but in the code that re-creates the page. I re-create the page with each calculation and could certainly do it to change the .js file database. I actually got it working with the document.write -- even two different .js files conditionally -- but it would only load the correct one upon the first load. When I re-created the page and it should have loaded the other .js file it gave error messages and after about two hours working on about three lines of code I'd had enough.

Now I'm re-thinking things and thinking that Reload isn't so bad after all. I don't really have so many variables to worry about that I couldn't store them in a cookie before Reload. So I'm working along that line.

Always something new... when I make a huge .js file to load it creates a problem. It says a text string is unterminated and then that the variable defined in the .js file in undefined. It seems quite like after a period of time working on loading the huge .js file it just moves on. That would make those error messages seem appropriate.

Again, with smaller .js files it works just fine.

This isn't actually too much of a problem because I don't want to have the .js files be too big. That's why I want to be able to load them conditionally. On the other hand a file that's not too big for my PC/browser could be too big for a user's, so I really do need to test with huge .js files and solve the problem.

If it is just going ahead before the .js file is loaded, maybe I need to use onLoad somehow. I'll have to read up on it... I've never understood just how it works or when to use it.

I'm not asking any questions now... I've got some more work to do. Just wanted to update you and thank you again for your help.


04-07-2003, 02:38 AM
I wanted to report progress on my original topic of "On-screen display while loading a large .js file."

I got everything running pretty well with IE and Netscape browsers but things were not working with WebTV's simulator. In trying to determine how far I was getting through my coding before it failed, I put JS alerts at different points down the code. It was like a nightmare. I would keep trying them further and further down the code till I'd get to the bottom and then it worked without them.

I finally figured out that simply putting an alert in the code solved the problem. And once it hit one alert it loaded the big .js file it was having problems loading and unless I reloaded the WebTV simulator it just kept working. That was exasperating to figure out!

Well, I figured I had to use the onLoad capability RoyW suggested. I had tried earlier but failed.

What I did wrong was I tried it inside the function that creates the page display. It worked great when I put it at the very end of all my coding so that the last thing that happens is it does an onLoad=createThePage.

Before my "Loading food list..." file appeared sometimes and sometimes not while the list was being loaded. Now it appears right away and remains until the loading is complete at which time the display is re-created. Great!

However, this doesn't seem to work for WebTV. It seems that WebTV is trying to do something before the .js file is fully loaded and the onLoad doesn't fix it. So I have a jury-rig fix... when the user goes to the page they get an alert: "Please let us know if you have problems with our new calculator."

(I don't expect many WebTV users so I'm not too concerned about this. But I certainly didn't want the page to fail.)

Interestingly enough this alert is NOT providing the necessary time for the list to be loaded. Even after you click on OK the list continues to be loaded until it's complete. So the alert is not stalling while the list is loaded... but the stall it creates keeps something bad from happening.

Can't imagine anyone wanting to read all this but it's my way of saying thanks for the help and... relieving 24 hours of stress!



Roy Sinclair... your stealth script to conditionally load .js files continues to work great. Solved a big problem.