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.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Feb 2007
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How do I get a script to run before the page finishes loading?

    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:

    Code:
         <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]);
        while(WSj<='2'){
        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;
        }
        }
        WSj++;
        WSy = document.getElementsByTagName(WSarr[WSj]);
        }
        }
        }
        window.onload = pointconversion;
        </script>
    This script also relies on a ID inside a div, with the following code:

    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

  • #2
    New Coder
    Join Date
    Jan 2007
    Posts
    38
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I know of a recent article that covers this very issue in quite a bit of depth. Perhaps this can help you.

    http://peter.michaux.ca/article/553

    Good luck

  • #3
    New Coder
    Join Date
    Feb 2007
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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"

    Loren

  • #4
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,632
    Thanks
    0
    Thanked 649 Times in 639 Posts
    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.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #5
    New Coder
    Join Date
    Feb 2007
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    What I did was take out this line from the main script:

    window.onload = pointconversion;

    I then put this just before </body>

    <script="text/javascript">pointconversion();</script>

    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.

    Loren


  •  

    Posting Permissions

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