...

View Full Version : having 2 things load at EXACTLY the same time



canadianjameson
08-23-2004, 10:44 PM
I have a multi-image rollover script, the only issue is that it loads images one at a time and for the first second or so the complete image looks dissociated.

is there a way to load all the images at once, or to "not rollover until all images loaded"

jbot
08-23-2004, 10:51 PM
yeah, if you use the complete property of images, you could write a script which checks that all have completed before executing the rollover. basically, increment a value according to the number of complete images, and when it reaches the length of your image array, then you're ready for take-off. :D

Mr J
08-24-2004, 07:55 PM
Can you post your url so we can see the code

brothercake
08-24-2004, 09:46 PM
You can do rollovers without a preload by putting all the states in the same image and then changing their background-position. Check this out: http://wellstyled.com/css-nopreload-rollovers.html

canadianjameson
08-25-2004, 05:11 AM
the full source is at www.enviromark.ca

you can see that there is a delay with the onmouseover on the enter sign, even though i use a really cool script that willy and i developped called a postload script, which allows the page to load and then once it's loaded, preceeds to load any images specified into an array.

here's the code


</script>

<script type="text/javascript">
//<![CDATA[
function postLoad(){
if(!window.name.match(/preLoad.complete/gi)){
var images = new Array('EnglishOn.gif',
'EnterOn.gif',
'EntrerOn.gif',
'FrenchOn.gif');

var loader = new Array();
for(var i=0; i<images.length; i++){
loader[i] = new Image();
loader[i].src = images[i];
}
window.name = 'preLoad.complete';
}
}
//]]>
</script>

...
<body onload="postLoad()">


but there still seems to be a delay... which you can see if you go to the url.

it is a 7 image rollover, but with postloading that should be compensated for...

any thoughts?

Willy Duitt
08-25-2004, 07:53 AM
The advantages of Postloading is that it allows the page to quickly load without waiting for those images to load first and allows these images to load in the background after the page has been displayed.... This technique is particularly useful for image slideshows or when you wish to preload your next pages images.... But, there will be a slight delay if used with rollovers and someone jumps to one of the links immediatedly on page load and prior to these postloaded images having a chance to load....

I'm sure I mentioned this when we were discussing Postloading versus Preloading but your solution is to Preload..... Either remove the function wrapper or call the function on window.onload....

......Willy

canadianjameson
08-25-2004, 03:49 PM
its odd though willy, i have left the page for a full minute without moving my mouse, but when i go over the rollover there's still what seems to be a loading delay.

try it and tell me what you find

jbot
08-25-2004, 03:57 PM
seems alright to moi :confused:

Willy Duitt
08-25-2004, 04:36 PM
No problems here with the rollovers either...

But since there is really is not much content on that page and since the images are rather small... It would not hurt to preload rather than postload....

.....Willy

RoyW
08-25-2004, 05:50 PM
document.EnterOffSW.src = "img/EntrerOn.gif";

var images = new Array('EnglishOn.gif',
'EnterOn.gif',
'EntrerOn.gif',
'FrenchOn.gif');

canadianjameson
08-28-2004, 02:58 AM
i'm not sure i follow your logic Roy.

The EntrerOn.gif is a rollover image, and is only loaded when the user does an onMouseOver

jamescover
08-28-2004, 03:30 AM
i'm not sure i follow your logic Roy.

The EntrerOn.gif is a rollover image, and is only loaded when the user does an onMouseOver

The logic is to preload all images, no matter how small the file size. The images will be loaded into the cache. Waiting for rollover images to download on mouseover is not a good practice.

In fact, even if the images have already been loaded, it is better to swap layer visibility, instead of the actual images.


-james

RoyW
08-30-2004, 09:50 PM
i'm not sure i follow your logic Roy.

The EntrerOn.gif is a rollover image, and is only loaded when the user does an onMouseOver

Hi,
I was in a hurry.

What I was trying to point out is that you are not preloading any images because the source string in your preload code is not correct. It should be

var images = new Array('img/EnglishOn.gif',
'img/EnterOn.gif',
'img/EntrerOn.gif',
'img/FrenchOn.gif');

canadianjameson
09-01-2004, 06:03 PM
HAHAHAHHAHAHA O M G!

dude

wow

i think i'm gonna take my pretty pink skirt and go home.

wow

canadianjameson
09-01-2004, 06:07 PM
dude, thank you so much. it works perfectly now



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum