Get Java Script to load before page loads

JavaScript
1

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. :slight_smile:

2

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:

document.writeln('<a href="javascript://" id="left-arrow"></a>\
<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:

document.writeln('<a href="javascript://" id="left-arrow" class="hidden"></a>\
<a href="javascript://" id="right-arrow" class="hidden"></a>');

Finally, I wrote an onload=function to swap the .hidden class with the .visible class:

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!

3

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% 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.

4

You could overcome the problems felgall mentioned by adding links that take you to different parts of the same page.

eg.

<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

document.getElementsByTagName("a")[0].onclick=function(){window.focus(this.href.split("#")[1]);return false;}