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()" >
 
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()" >
Click to expand...


of course it would be nice if my OnLoadFn was actually called
onload...duhh!!!!
But the small button backgrounds still don't preload?...
 
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.
Click to expand...

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" >
Click to expand...

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

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

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

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

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;
Click to expand...


preload.src = arguments;

}

}

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

}
Click to expand...

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.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

JQuery - Preloading Images 0
Help with my responsive home page 2
Help with Visual Lightbox: Scripts 2
Flip-Cards with Local Images 1
Advice on Preloading Images. 1
Having difficulty with the layout of these images / video for this web page 2
Help with code 0
Randomizing images without preloading and repeats 2

Members online

No members online now.
Total: 30 (members: 0, guests: 30)
Robots: 346

Forum statistics

Threads
473,769
Messages
2,569,582
Members
45,065
Latest member
OrderGreenAcreCBD

Latest Threads

Top