Kangry.com [insert cool graphic here]
home | Topics | Logout | Search | Contact | ?? Kangry ?? | Bandwitdh
Topics:
DVR
nvrec
Mplayer
Links
Misc
Commands
Humor

Name

Password

New user

uploaded files
(DVRSETUP1)-> server driven javascript submited by Russell Sun 11 Dec 05
Edited Fri 08 Jun 12
Web kangry.com

So I had a page, (actually it's for my home built tivo) that took forever to load because each time it loaded it would re-generate the content. The page listed all the programs currently recorded on the system, (which can get get quite large as I don't get around to watching many things for a while. ) But the problem was that on the top of the page it listed each category and how many files were in it. This data was not known until the page had fully loaded, so I had to buffer all the content and then build the header and finally display the list of files.

Depressingly this could take many seconds to load. It was quite irritating and started to make my wife think the system was too slow to use. My fix for this was two fold. First I put the list of the files into a database table that is frequently updated. This lets me skip doing a ls command over the lan. This saves some time. But the big thing I did to improve the perceived speed of the list page was to use dynamic html.

Rather than waiting until I have loaded the whole list to display the category headers I display empty ones at the top of the page then use javascript commands at the end of the page to update the values and hide empty ones. This way the user sees the page start loading immediately, and since most often you are looking for stuff on the top of the page ( most recently recored) you see what you want right away. The perceived load time drops to less than a second. (even if it might be much longer till the page is completely loaded. )

The procedure for this is quite simple. At the top of the page I display all the possible category links.

<a id='70s' href=listmovies.cgi?filter=70s>That '70s Show()</a><span id='line_70s' > | </span>
<a id='Aeon' href=listmovies.cgi?filter=Aeon>Aeon Flux()</a><span id='line_Aeon' > | </span>
.......

Each line is a category link. It has an ID set to it that is unique. the ID is used later by the javascript. This code is generated by a perl foreach script .

At the end of the load , the perl then runs back through the categories and updates the text to indicate the current total.

<script>
var link = document.getElementById("70s");
link.textContent="That '70s Show(26)";
link = document.getElementById("Aeon");
link.textContent="Aeon Flux(7)";
.....
IF it's zero, I set the text to nothing , hiding the link and then I also null out the span next to it, because if I didn't I would end up with too many dividers between links.
link = document.getElementById("Brady");
link.textContent="";
link = document.getElementById("line_Brady");
link.textContent="";
the perl behind this is actually quite ugly because of all of the quotes and semicolons. but it works.
foreach (sort keys %FILTER)
  {
   if ($CAT{$_} eq "")
   {
   print "link = document.getElementById(\"$_\");\n";
   if ($HIT{$_}>0)
          { print "link.textContent=\"$NAME{$_}(".$HIT{$_}.")\";\n";}
       else
          { print "link.textContent=\"\";";
            print "link = document.getElementById(\"line_$_\");"; ## this blanks out extra |'s
            print "link.textContent=\"\";";
          };
   }; ## if this isn't a catagory

  }
The net effect is that several seconds after the page load begins, the category links at the top of the page reformat and shuffle to contain the correct information.


Replys:

Add comment or question...:
Subject:
Submited by: NOT email address. Leave blank for anonymous    (Spam Policy)

Enter Text: (text must match image for posting)




This file (the script that presented the data, not the data itself) , last modified Tuesday 06th of March 2018 11:41:12 PM
your client: claudebot
current time: Tuesday 19th of March 2024 01:00:58 AM