Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 17
  1. #1
    Regular Coder
    Join Date
    Jun 2002
    Location
    Vancouver, WA
    Posts
    233
    Thanks
    2
    Thanked 0 Times in 0 Posts

    On-screen display while loading a large .js file

    This is my index.html:

    <!-- index.html 3.27.03 -->
    <html><head>
    <title>Food Calories & Nutrition Calculator</title>
    </head>
    <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>
    </frameset>
    </html>

    "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

  • #2
    Master Coder
    Join Date
    Feb 2003
    Location
    UmeŚ, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    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.
    Last edited by liorean; 03-31-2003 at 06:25 PM.
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #3
    Regular Coder
    Join Date
    Jun 2002
    Location
    Vancouver, WA
    Posts
    233
    Thanks
    2
    Thanked 0 Times in 0 Posts
    My only hesitation is that it's HUGE. Is that okay to post?

  • #4
    Master Coder
    Join Date
    Feb 2003
    Location
    UmeŚ, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    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...)
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #5
    Regular Coder
    Join Date
    Aug 2002
    Location
    Spain
    Posts
    420
    Thanks
    0
    Thanked 0 Times in 0 Posts
    no, post the source code for the "create" page
    Don't resist to assimilation. Billions of Borgs can't be wrong!

  • #6
    Regular Coder
    Join Date
    Jun 2002
    Location
    Atlanta, GA.
    Posts
    313
    Thanks
    0
    Thanked 0 Times in 0 Posts
    http://www.caloriesperhour.com/index_food.html

    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?

  • #7
    Master Coder
    Join Date
    Feb 2003
    Location
    UmeŚ, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    By "the parts relevant to just this" i meant the create script...
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #8
    Regular Coder
    Join Date
    Jun 2002
    Location
    Vancouver, WA
    Posts
    233
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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 -->
    <html>
    <head>

    <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(){
    V=parent.image.document.f1.list[parent.image.document.f1.list.selectedIndex].value;
    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(){
    search=0;
    ...
    saveCookie1y("prevTotsCookie",prevTots,X1y);
    makeImage()}}

    // Function to make image frame
    function makeImage(){
    if (getCookie("listCookie")==null){v=81}
    else {v=getCookie("listCookie")}
    c="<html><head>";
    c+="<style type='text/css'><!-- a:link, a:visited, a:active {text-decoration:none} --></style>";
    c+="</head>";
    // 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'>"}}
    tcp=tcb;
    // Table for entire page
    c+="<center>";
    c+="<table>";
    // 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;
    c+="</td></tr>";
    // Food menu
    c+="<tr><td align=center>";
    c+="<form name=f1>";
    c+=tf+tsr+tcp;
    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}
    c+="</select></td></tr>";
    // Servings menu
    c+="<tr><td align=center>";
    c+=tf+tsr+tcp+"Servings:&nbsp;&nbsp;";
    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;"}
    c+=sp;
    // Weight entry
    c+="Weight:&nbsp;&nbsp;";
    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"}
    c+=sp;
    // 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>";
    c+="</td></tr>";
    // Calculate button
    c+="<tr><td align=center>";
    c+=tf+tsr+tcp;
    c+="<a href='javascriptarent.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+="parent.create.chgImg(\"searchButton\",\"blinkMan25\")'>";
    c+="<img src='buttons/blankMan.gif' height=35 width=35 ";
    c+="name='calcButton' align=absmiddle border=0></a> Calculate";
    c+=sp;
    // Search button
    c+="<a href='javascriptarent.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+="parent.create.chgImg(\"printButton\",\"blinkMan25\")'>";
    c+="<img src='buttons/blankMan.gif' height=35 width=35 ";
    c+="name='searchButton' align=absmiddle border=0></a> Search";
    c+="</td></tr>";
    // Display panel
    c+="<tr><td>";
    c+=tf+tsh+tcp+"<tt>";
    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>"}
    c+="</tt>";
    c+="</td></tr>";
    // Links
    c+="<tr><td align=center>";
    c+=tf+tsr+tcp;
    s="&nbsp; •&nbsp; ";
    c+="<a href='faqs.html' target='_top' ";
    c+="title='Q&A about Diet and Weight Loss, Calories and our Calculators'>";
    c+="FAQs</a>"+s;
    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+="</td></tr>";
    c+="<tr><td align=center>";
    c+=tf+tsr+tcp;
    c+="<img src='graphics/newArrow_w26h19.gif' align=absmiddle>xxx<a href='javascriptarent.create.noteJump()'>Important note for return visitors!</a>"}
    c+="</td></tr></form></table>";
    // Ad
    if (ad==1){
    c+="<p align=center>";
    c+="<a href='javascriptarent.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.";
    c+="</td></tr></table>"}
    c+="</td></tr></table></center></body></html>";
    parent.image.document.write(c);
    parent.image.document.close();
    parent.image.document.f1.list.selectedIndex=selectNum}

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

  • #9
    Regular Coder
    Join Date
    Jun 2002
    Location
    Atlanta, GA.
    Posts
    313
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #10
    Regular Coder
    Join Date
    Jun 2002
    Location
    Vancouver, WA
    Posts
    233
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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

  • #11
    Regular Coder
    Join Date
    Jun 2002
    Location
    Vancouver, WA
    Posts
    233
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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

  • #12
    Senior Coder
    Join Date
    Jun 2002
    Location
    Wichita
    Posts
    3,880
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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:

    Code:
    if (true) 
        { document.write "<script ...></script>"; }
    You have to write it like this:

    Code:
    if (true)
        { document.write "<" + "script ...><" + "/script>"; }
    Don't let the browser see <script> or </script> as a single string within your code.

  • #13
    Regular Coder
    Join Date
    Jun 2002
    Location
    Vancouver, WA
    Posts
    233
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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.

    Thanks!

  • #14
    Regular Coder
    Join Date
    Jun 2002
    Location
    Vancouver, WA
    Posts
    233
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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

  • #15
    Senior Coder
    Join Date
    Jun 2002
    Location
    Wichita
    Posts
    3,880
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •