Click to See Complete Forum and Search --> : loading 8 images at the same time
pdgguy
03-25-2003, 07:12 AM
I have 8 separate animations on a splash page. The problem is that they load as the page loads, so when the page has finished loading, they are all out of sequence. Is there anyway that I can stop the animations from beginning their cycle until all the animations have completely loaded. (Think of each animation as having 4 frames, the 1st shows the number 1, the second number 2, etc. I need each animation to show the same frame at the same time. But the first one is already at #3 frame by the time the last animation loads and displays #1...)
Can javascript tame this beast?
Phil Karras
03-25-2003, 08:53 AM
I believe so.
I think you can do a load in the <head> <script> tag section like this:
var Image = new Array();
for(i=0; i<8; ++i) {
Image[i] = new Image();
}
Image[0].src = "Imge0.gif";
.
.
.
Image[7].src = "Imge7.gif";
Now, in the <body> tag use an onLoad='ShowImages();"
Then again in the <head><script> section write the ShowImages() function that now puts the images, pre-loaded, onto the page as quickly as it can.
Now, on your page you can have <img src='0.gif' ...>
.
.
.
<img src='7.gif'>
where 0.gif - 7.gif are small static images to be replaced by the pre-loaded ones above.
I believe JS allows:
document.images[#].src = name;
to do the job of replacing images - HINT: in your ShowImages() function.
My suggestion is to get the concepts working for one or two images and then extend it.
pdgguy
03-25-2003, 10:05 AM
I think I follow you but am a little confised by:
I believe JS allows:
document.images[#].src = name;
to do the job of replacing images - HINT: in your ShowImages() function.
I certainly don't mean for you to write the whole thing, but my brain is clearly missing your intention. Only if you have the time, which I know is in short supply for us all.
Phil Karras
03-25-2003, 11:11 AM
As per my partial example above use:
document.images[i].src =Image[i];
in a similar loop as shown above in the function called when onLoad fires.
havik
03-25-2003, 11:12 AM
Building upon what phil said, you need to preload the animations when the page is loading. Meanwhile, you also need the start images of each animation to be shown while the page is loading. Once the page has finished loading, you need to replace these images with the animations themselves.
The following could help:
var loaded = false;
function preloadImages(){
image1 = new Image();
image1.src = "image1.gif";
image2 = new Image();
image2.src = "image2.gif";
etc...
loaded = true;
}
function changeImages() {
if (document.images && (loaded == true)) {
for (var i=0; i<changeImages.arguments.length; i+=2) {
document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
}
}
}
<body onload="preloadImages();changeImages('image1','image2',etc...)">
That should work, if not, let me know what problems arised. There's lots of repetition but you can fix that up if you wish.
Havik
havik
03-25-2003, 11:18 AM
Opps, I wrote the changeImages function incorrectly.
Argument 1 should be the name of the image variable, which in this case would be image1, image2, image3, etc...
Argument 2 should be the URL of the animation to replace the image.
In this case, you may enter the arguments as,
changeImages('image1', 'image1URL', 'image2', 'image2URL', etc...)
for 8 images this can get long so you could write another function that calls the changeImages functions and inserts the appropriate arguments. Then the use of arrays is important.
example:
var images = new Array();
var sources = new Array();
...
changeImages(images[i], sources[i])
havik
pdgguy
03-25-2003, 11:56 AM
Do you mean like this?
<html>
<head>
<title>sample</title>
</head>
<script language="javascript">
var loaded = false;
function preloadImages()
{
image1 = new Image();
image1.src = "anim1.gif";
image2 = new Image();
image2.src = "anim2.gif";
loaded = true;
}
function changeImages()
{
if (document.images && (loaded == true))
{
for (var i=0; i<changeImages.arguments.length; i+=2)
{
document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
}
}
}
</script>
<body onload="preloadImages();changeImages('spacerTr1.gif', 'image1', 'spacerTr2.gif', 'image2')">
<table border="1" cellpadding="4" cellspacing="4">
<tr>
<td><img border="0" src="spacerTr1.gif" alt="anim1 should go here" width="20" height="20"></td>
<td><img border="0" src="spacerTr2.gif" alt="anim2 should go here" width="20" height="20"></td>
</tr>
</table>
</body>
</html>
Remarks using the work simpleton would be acceptable...
havik
03-25-2003, 12:07 PM
Actually, I noticed something I didn't account for. I'll take a look at that.
Havik
havik
03-25-2003, 01:17 PM
This should work. I do not have any animations to test it on.
Havik
<html>
<head>
<title>sample</title>
</head>
<script language="javascript">
var loaded = false;
function preloadImages() {
images = new Array();
images[0] = new Image();
images[0].src = "anim1.gif";
images[1] = new Image();
images[1].src = "anim2.gif";
loaded = true;
}
function changeImages() {
if (document.images && (loaded == true)) {
for (var i = 0; i < images.length; i++) {
document["image" + (i+1)].src = images[i].src;
}
}
}
</script>
<body onload="preloadImages();changeImages()">
<table border="1" cellpadding="4" cellspacing="4">
<tr>
<td><img src="spacerTr1.gif" border="0" name="image1"></td>
<td><img src="spacerTr2.gif" border="0" name="image2"></td>
</tr>
</table>
</body>
</html>
pdgguy
03-25-2003, 02:17 PM
Here's the page online with your new code intact. Something tells me this might not be doable.
havik
03-25-2003, 02:34 PM
Not all going at once are they? Oh well. It was close. If you have your hearts set on it all changing then you could remove the animations and make them separate images. Then add a timer to change these images all at once. If this doesn't work then how about changing them in a sequence?
Havik
pdgguy
03-25-2003, 03:35 PM
I agree, I don't think there is any way using animations. I'm going to look at your second suggestion, and thanks for your help.