SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2009
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Get Java Script to load before page loads

    I have built a horizontal scrolling website.
    I don't really know much about Java Script, but I downloaded this script called Horizontal Tiny Scroller. The script basically lets you scroll the website horizontally, without using the scroll bar.

    Everything works perfectly except the script only loads once everything else on the page has finished loading.

    As my site has a high number of graphics, this creates a usability as the scroller buttons do not immediately work. I'm guessing most the users will assume that the buttons are broken.

    Is there way to make the script load as soon as the page starts loading? I've had a good look, but can't find anything that is easy to understand for java script noobs.

    Thanks for any help. ^_^

  2. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,869
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    You could move the script to the top of the <head> of the page (assuming that it can still run from there). That will mean that the entire page loads more slowly though since nothing else will be able to download while the JavaScript is loading.

    Since the page will work the same before the JavaScript loads as it does for the 10&#37; of visitors who don't allow the JavaScript to ever load, if you have problems due to the JavaScript loading last then you'll still have those problems for those without JavaScript no matter where you move it.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  3. #3
    ♪♪ ♪ ♪ ♪ ♪♪ ♪ ♪♪ Markdidj's Avatar
    Join Date
    Sep 2002
    Location
    Bournemouth, South UK
    Posts
    1,551
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    You could overcome the problems felgall mentioned by adding links that take you to different parts of the same page.

    eg.
    Code:
    <a href="#area_1" title="go to area 1">Area 1</a>
    That will allow users without javascript to skip to the intended part without using javascript, so long as it's been given the id "area_1"

    The method I use changes these to javascript functions onload, eg
    Code:
    document.getElementsByTagName("a")[0].onclick=function(){window.focus(this.href.split("#")[1]);return false;}
    LiveScript: Putting the "Live" Back into JavaScript
    if live output_as_javascript else output_as_html end if

  4. #4
    SitePoint Enthusiast
    Join Date
    Jun 2009
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    After looking into this more, I've found that I can't have Java Script to load first, as the script requires certain elements on the page to render.

    These best solution is to have the scroller buttons hidden until the page has finished loading. That way, no one can click on them whilst they don't work.

    A bit of background: My java script uses a document.writeln command to make the buttons appear on the page:
    Code:
    document.writeln('<a href="javascript://" id="left-arrow"></a>\n<a href="javascript://" id="right-arrow"></a>');
    To make the buttons hidden until the page has loaded, I created two CSS classes: .visible {display:block;} & .hidden {display:none;}.
    I rewrote the document.writeln command so the buttons were assigned the .hidden class by default:
    Code:
    document.writeln('<a href="javascript://" id="left-arrow" class="hidden"></a>\n<a href="javascript://" id="right-arrow" class="hidden"></a>');
    Finally, I wrote an onload=function to swap the .hidden class with the .visible class:
    Code:
    onload=function() {
         document.getElementById('left-arrow').className='visible';
         document.getElementById('right-arrow').className='visible';
    }
    Everything works fine, and the buttons only appear when the page has loaded. HOWEVER, the scrolling function doesn't work any more! (See here) If I delete the onload=function everything works again (but then of course the buttons appear before the page has finished loading).

    Does anyone have any pointers as to what I'm doing wrong?

    Thanks!


Bookmarks

Posting Permissions

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