Horrendously slow loading page 1

[maharg]

Hi

I'm making a page for my cycle racing club which shuffles our club riders' names, alongside a fixed list of professional riders.

It should look like this screenshot...

http://www.graham-laming.com/randompairing.gif

The page is at...

http://www.graham-laming.com/randompairing.htm

The page takes over a minute to load in Firefox, and in IE the table structure is corrupt.

I'm getting nowhere - any help MUCH appreciated!

Thanks and regards,

Graham

 

[trollacious]

I would change this

<table width=600>
<tr><td>
<div id="pairing"></div>
</td></tr>
</table>

to

<div id="pairing"></div>

and this

files.sort(randOrd);
for (i=0; i<files.length; i++) 

{
x=i+1;
document.getElementById('pairing').innerHTML+= '<tr><td bgcolor=yellow width=300 align=left>&nbsp;&nbsp;'+entrants[files[i]]+' </td><td bgcolor=silver width=300 align=left>&nbsp;&nbsp;'+ pros[i] +'</td></tr>';
}

to this

files.sort(randOrd[b][red]()[/red][/b]);
var tstring = '';
for (i=0; i<files.length; i++) 
  {
  tstring += '<tr><td bgcolor="yellow" width="300" align="left">&nbsp;&nbsp;' + entrants[files[i]] + ' </td><td bgcolor="silver" width="300" align="left">&nbsp;&nbsp;' + pros[i] + '</td></tr>';
  }

document.getElementById('pairing').innerHTML = '<table width="600">' + tstring + '</table>';

document.getElementById calls can be expensive time-wise, so calling it once to insert the whole string should be faster.

As well, your original page has a table with a row and cell containing a div, and inside the div you just start throwing in rows and cells. The code above puts the entire table into the div after it's built.

And in the page source it shows x = i + 1 in the for loop, but x is never used.

You could speed it up a bit by unrolling the loop, too, but the code I gave you should help with what you want.

Lee

 

[trollacious]

I was wrong about using the parentheses in the array sort method call.

Other than that, the code displays in IE and Firefox pretty quickly, and shows what you want.

Your styles at the top need a change to semi-colons rather than commas after the color: black in a couple spots, too.

Lee

 

[maharg]

Fantastic, many thanks Trollacious, really appreciated.

The revised page is at

http://www.graham-laming.com/brcc_vuelta_pairing.htm

to demonstate the before and after.

Regards,

Graham

 

[trollacious]

You don't need to reload the page each time, you just need to call the function.

<input type="button" value="Reshuffle Riders" onclick="ShuffleTheRiders()">

Lee

 

[trollacious]

You have an end; statement just before your </script> tag that causes an error.

Lee

 

[trollacious]

Somewhere in your files array you're missing a number. To make it the same length as the pros array, I'd initialize it AFTER the pros array like this:

/////////////////////////////////////////////////////
//index numbers, make sure there are as many index numbers as there are [b]entrants[/b] (or use [b]pros[/b] if you want to skip the extra entrants on the list)
/////////////////////////////////////////////////////
var files= new Array();

for (var fi=0;fi<[b][red]entrants[/red][/b].length;fi++)
  {
  files[fi] = fi;
  }

and

for (i=0; i<[b][red]pros[/red][/b].length; i++)
  {
  tstring += '<tr><td bgcolor="ffffaa" width="220" align="left">&nbsp;&nbsp;&nbsp;&nbsp;<b>' + (i+1) + '.&nbsp;&nbsp;' + entrants[files[i]] + '</b></td><td bgcolor="#eeeeee" width="220" align="left">&nbsp;&nbsp;&nbsp;&nbsp;' + pros[i] + '</td></tr>';
  }
document.getElementById('pairing').innerHTML = '<table width="440" border=1>' + tstring + '</table>';

Lee

 

[maharg]

Thanks again Lee,

I think I found the missing number, but I'll take your advice on the initilization - will update tomorrow.

All the best,

Graham

 

[audiopro]

<div id="pairing"></div>

What is the point?

Keith

http://www.studiosoft.co.uk

 

[trollacious]

I don't understand your question, Keith.

Lee

 

[johnwm]

Keith - have a look at the javascript quoted in Lee's first post and see where the table is constructed.

If you want the best response to a question, please check out FAQ222-2244 first.
'If we're supposed to work in Hex, why have we only got A fingers?'
Drive a Steam Roller

 

[audiopro]

The code supplied just outputs a single list of names in the div.
I think the original poster intended to use a table to display 2 columns of names, as in the screen shot.

Keith

http://www.studiosoft.co.uk

 

[trollacious]

The final link the OP provided shows pretty much the exact output as the image in his first post.

Lee

 

[audiopro]

Sorry Lee, the first time I viewed the final link, the display was all messed up. It looks good now though, not sure what happened there.

Keith

http://www.studiosoft.co.uk

 

[GUJUm0deL]

The link still takes a long time to load. In FF, I got an error saying the script is taking to long to load and if I want to stop running the script.

_____________________________
Just Imagine.

http://www.imajinarts.com

 

[trollacious]

I just checked it in Firefox 3.52 and the page loaded quickly (almost as fast as the Google search page) and the script displayed the table in less than a second. Works in IE and Chrome just as fast for me on this old 1GHz Pentium III.

Are you using the link

http://www.graham-laming.com/brcc_vuelta_pairing.htm

?

Lee

 

[GUJUm0deL]

Sorry, must have that link post. I was using the link posted in the original post.

Checked the new link, and it loads quick.

_____________________________
Just Imagine.

http://www.imajinarts.com