Help with preloading images


G

Gary Hasler

I just can't get them to preload! I have menu buttons with .gif
background images which the browser doesn't seem to get around to
downloading until everything else on the page is loaded (which makes the
buttons transparent until then), so I want to preload them. Plus there
are "hover" versions in red color which I want to preload for the normal
reasons. Example here:
http://test.thelogconnection.com/stockplan_A.php?Blue_Ridge
It's the second row of buttons with rounded corners that I'm referring
to.

Here is the code I'm using:
In the HEAD:

<script language="JavaScript" type="text/javascript" >
var preload = new Array();
function PreloadImageList () {
for (i=0; i<PreloadImageList.arguments.length; i++) {
preload = new Image();
preload.src = PreloadImageList.arguments;
}
}

function OnLoadFn ( ) {
//-- PRELOAD UP BUTTON IMAGES
PreloadImageList
('images/Btn_Stockplan_Us.gif','images/arrow-forward_U.gif');
}

//-- LOAD NORMAL BTN IMAGES NOW (PREVENTS TRANSPARENT BUTTONS WHILE PAGE
LOADS)
PreloadImageList ('images/Btn_Stockplan_C.gif',
'images/Btn_Stockplan_N.gif', 'images/Btn_Stockplan_Cs.gif',
'images/Btn_Stockplan_Ns.gif', 'images/Btn_Stockplan_U.gif');
</script>
</head>

<body class="body1" onunload="OnUnLoadFn()" >
 
Ad

Advertisements

G

Gary Hasler

Gary said:
I just can't get them to preload! I have menu buttons with .gif
background images which the browser doesn't seem to get around to
downloading until everything else on the page is loaded (which makes the
buttons transparent until then), so I want to preload them. Plus there
are "hover" versions in red color which I want to preload for the normal
reasons. Example here:
http://test.thelogconnection.com/stockplan_A.php?Blue_Ridge
It's the second row of buttons with rounded corners that I'm referring
to.

Here is the code I'm using:
In the HEAD:

<script language="JavaScript" type="text/javascript" >
var preload = new Array();
function PreloadImageList () {
for (i=0; i<PreloadImageList.arguments.length; i++) {
preload = new Image();
preload.src = PreloadImageList.arguments;
}
}

function OnLoadFn ( ) {
//-- PRELOAD UP BUTTON IMAGES
PreloadImageList
('images/Btn_Stockplan_Us.gif','images/arrow-forward_U.gif');
}

//-- LOAD NORMAL BTN IMAGES NOW (PREVENTS TRANSPARENT BUTTONS WHILE PAGE
LOADS)
PreloadImageList ('images/Btn_Stockplan_C.gif',
'images/Btn_Stockplan_N.gif', 'images/Btn_Stockplan_Cs.gif',
'images/Btn_Stockplan_Ns.gif', 'images/Btn_Stockplan_U.gif');
</script>
</head>

<body class="body1" onunload="OnUnLoadFn()" >


of course it would be nice if my OnLoadFn was actually called
onload...duhh!!!!
But the small button backgrounds still don't preload?...
 
Ad

Advertisements

R

RobG

I just can't get them to preload! I have menu buttons with .gif
background images which the browser doesn't seem to get around to
downloading until everything else on the page is loaded (which makes the
buttons transparent until then), so I want to preload them. Plus there
are "hover" versions in red color which I want to preload for the normal
reasons. Example here:http://test.thelogconnection.com/stockplan_A.php?Blue_Ridge
It's the second row of buttons with rounded corners that I'm referring
to.

I think your question would be much better answered if asked in a CSS
group:

<URL: http://groups.google.com.au/group/comp.infosystems.www.authoring.stylesheets?hl=en&lnk=li
You can do what you want without any preloading, including swaping the
images:

1. Join your over and out images to make one image
2. Set the background so only the 'unhovered' image shows
3. On hover, slide the background image to show the 'hover' image
4. On un-hover, slide it back

You can do all that with just CSS and A elements - no script required
or preloading.

CSS Design: Mo' Betta Rollovers
Here is the code I'm using:
In the HEAD:

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

The language attribute is deprecated, so remove it. Keep type.
var preload = new Array();

You can initialise an array using [].
function PreloadImageList () {

It is a convention that functions starting with a capital letter are
constructors. Use: preloadImageList

for (i=0; i<PreloadImageList.arguments.length; i++) {

Do not use the function name when accessing the arguments object, just
use arguments.

It is (marginally) faster to store the length property in a variable
than access it every time, and you could use a while statement for a
bit more speed:

var i = arguments.length;
while (i--) {

preload = new Image();
preload.src = PreloadImageList.arguments;


preload.src = arguments;

}

}

function OnLoadFn ( ) {
//-- PRELOAD UP BUTTON IMAGES
PreloadImageList
('images/Btn_Stockplan_Us.gif','images/arrow-forward_U.gif');

}

You want to pre-load them, so don't wait for onload. :)


But as noted above, there is no need to preload images if you use CSS
techniques to slides a single image rather than script to swap them.
 

Top