Forum Moderators: open

Message Too Old, No Replies

preLoading dynamically created images for animation

         

NCAnnie

2:46 pm on May 12, 2004 (gmt 0)

10+ Year Member



This needs php...
I am using a socket to download images created by the server on the fly (using <img src = " getimage.php?hour=N">) this works fine for a single image.

Now I want to preload a bunch of these images and display them at 1 sec intervals as an animation.
I preload (using javascript)
<HEAD><SCRIPT STUFF>
var index = 0;
hourN = new Image();
hourN.src = "getimage.php?hour = N";
etc for all N
</SCRIPT>
</HEAD>

My display function is
(javascript)
function next(){
switch (index) {
case 0:
document.images[0].src = hour0.src;
break;
.....
.....
}
++index
if (index==24)index = 0;
window.setTimeout("next()",1000);
}

I call next() for the first time in the
<BODY onLoad="window.setTimeout("next()",1000);">
(I have tried onLoad = "next();" as well)
each image is about 16k and I want 24 of them. (I am trying with just 3 for now)

My problem is (I think) that each request takes a certain amount of time and the first images are being displayed (it's slow in my test environment, but will be quick over eg broadband) before finishing the preload. What is happening is that the preLoader seems to be being called in a loop, creating loads of php.exe instances, and swamping my PC!
It seems that each reference to hourN (in next())causes another download, instead of just the one called in preLoad();

Is my problem with the php or the javascript?

Bernard Marx

4:29 pm on May 12, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I think it's this:


hourN.src = "getimage.php?hour = N";
...
document.images[0].src = hour0.src

I'm assuming you actually fill in N each time (BTW this should really be done in a loop could). The question is does the image get cached with this URL?

eg: "getimage.php?hour = 3"

..so when you switch an image src to the above it is simply called from cache, or is the request made again?

How many images are you displaying at one time?

NCAnnie

7:06 am on May 14, 2004 (gmt 0)

10+ Year Member



Hi Bernard,
Thanks for replying

It is the caching that is the problem, I want the images to be cached, by preloading, but it does seem that when hourN.src (document.images[0].src = hourN.src;) is called, it makes the request (getimage.php?hour = N) again, and because I have a loop, again and again and again.
I think that the problem really lies in the cacheing, but I have tried various combinations of browser cache control and php control, and can't hit on one that works. Would I have any control over the client browser? I do have control over the php server.

I only want one image at a time, to be replaced by the next and so on to form an animation. (The data is 24 hours of weather forecast suerimposed on a map)

Regards
Annie