View Full Version : How do I get a script to run before the page finishes loading?

02-07-2007, 06:28 PM
I use a WYSIWYG web design program that is limited to producing points rather than pixels in design mode.

I have come up with the following script that changes points to pixels for use when the site is viewed in browsers where the viewers display setting is greater than 100 dpi. The design program is structured around absolute positioning of text and graphics, and as a result, when viewed at > 100 dpi you get serious text overlapping due to the use of points. This script fixes that.

The script is designed only to fire when the viewers display setting is > 100dpi so it doesn't affect normal viewing.

When viewed in a browser set at 120 there is a delay before the text is changed from points to pixels. The situation gets worse when viewed on dial-up due to the lengthy image download time.

Is there any way to get the script to fire before the complete rendering of the page?

Here is the script:

<script language="JavaScript" type="text/javascript">

function pointconversion() {

if ( screen.deviceXDPI > 100 || patrn.offsetWidth>= 100) {

var WSarr=new Array('div','font');
var WSj='0';
var WSy = document.getElementsByTagName(WSarr[WSj]);
for (var WSi=0;WSi<WSy.length;WSi++) {
var strlength =document.getElementsByTagName(WSarr[WSj])[WSi].style.fontSize.length;
var pointsorpixels =document.getElementsByTagName(WSarr[WSj])[WSi].style.fontSize.substr(strlength-2,2);
if (pointsorpixels=="pt")
var newsize=Math.ceil(parseFloat(document.getElementsByTagName(WSarr[WSj])[WSi].style.fontSize)*1.3);
document.getElementsByTagName(WSarr[WSj])[WSi].style.fontSize = newsize;
WSy = document.getElementsByTagName(WSarr[WSj]);
window.onload = pointconversion;

This script also relies on a ID inside a div, with the following code:

<div style="visibility:hidden;position:absolute;left:0;top:0;"><span style="font-size:10pt;font-family:Arial,Sans-Serif;" id="patrn">aaaaaaaaaaaaiii</span></div>

The id "patrn" returns either 93 or 96 for browsers such as FF, Opera, Safari under normal display settings.

Ideally it would be best to have the script run before the text (in points) is rendered, but that would be pretty much impossible, I think.

Any ideas?

Thanks, Loren

02-07-2007, 08:48 PM
I know of a recent article that covers this very issue in quite a bit of depth. Perhaps this can help you.


Good luck

02-07-2007, 08:53 PM
Thanks, Arragon

That's going to take a bit of reading, but you never know, the answer might be in there somewhere. You weren't kidding when you said "quite a bit" :)


02-07-2007, 10:27 PM
The problem that you have is that your code is updating all of the content of the page and it can't do that until the whole page has loaded. You may be able to set something up that does the updates progressively as the page loads but the code wont be simple.

02-07-2007, 10:40 PM
What I did was take out this line from the main script:

window.onload = pointconversion;

I then put this just before </body>


Here are the results on the particular page that I was working on. These are Dial-up tests at 49k. Browser, FireFox.

Before the revision it took 30 seconds before the text was rendered properly.

After the revision the time was reduced to 8 seconds.

These tests were done after clearing the cache.

Each page has repeat graphics so I then cleared the cache > went to another page > and then called the page with the revisions on it, and the text was rendered properly in 3 seconds.

This was a fairly graphic intensive page.

Thanks for your help, Arragon, it was exactly what I needed.