Preload a dynamically generated image (PHP GD)

TheJuice

Hi,
I'd like to know if some of you have already done this?

I generate an image with a PHP script.
But the final size of the image is around 40 kb, and so when it is displayed, it doesn't appear instantly...

Therefore I would be glad if I could preload this image so it appears in one chunk.

I tried Javascript preloaders as this:

<script language="javascript">
		<!--
		function preloadimage()
		{
			image1 = new Image();
			image1.src = "image.php?state=angry";
		}
		//--></script>

And then:

 <img src="image.php?state=angry" alt="image">

But this does not work, maybe because it always asks the script for the image?

So I thought of a few ways of doing this:

Using Smarty's caching capabilities.
I don't think the will work because the image will be cached server-side, and the 40 kb will still have to travel across the net: the image will appear in a stuttering way.
Generating an image on the server's disk, with a unique filename, and preloading this image instead of the PHP script...
This could work I don't know.
[/list=1]

Any other ideas?

The_Chancer

From what I can see you are preloading the image, then asking it to load again in the image tag.

You will need to preload the image as you have done, then use the javascript reference "image1.src"...

<script language=javascript>
var image1 = new Image();
image1.src = "image.php?state=angry";
function doimage()
{
document['picture'].src=image.php?state=angry;
}
</script>

<body onload=doimage()>
<img src='' name=picture>
</body>

Something along those sorts of lines anyway....

TheJuice

I did as you said:

<script language="javascript">
		<!--
		function preloadimage()
		{
			document['image'].src="image.php?state=angry";
		}
		//--></script>

[...]

<img src="" name="image" alt="Ambassador">

It almost works, but there is a very strange behavior:

The image is displayed twice: the first time it appears immediatly, thanks to the preloading, and just after that, it is fetched again and appears the usual stuttering way...

It must think the image has changed: it displays the image it knows (that has been preloaded), then thinks "hey, but this is too old, I'm gonna fetch it again", and then displays the image again...

The_Chancer

You may have to have the script create a static picture first, and name it as a normal file fgsjhdfs.jpg then preload this...

Just add

<?
if (isset($_SERVER['HTTP_IF_MODIFIED_SINCE'])) {
if (time() < (strtotime($HTTP_IF_MODIFIED_SINCE) + 3600)) {
header("HTTP/1.0 304 Not Modified");
header("Cache-Control: max-age=3600, must-revalidate");
exit;
}
}

to the top of the image file....

as found here

It all has to do with browsers not cacheing (caching ?) dynamic mages... so you have to tell it to basically...

TheJuice

Finally it works as expected:

<script language="javascript">
		<!--
		var image = new Image();
		image.src = "image.php?state=angry";
		function preloadimage()
		{
			document['image'].src = "image.php?state=angry";
		{rdelim}
		//--></script>

And

<body onload="preloadimage();">

and also

<img name="image" alt="Ambassador">

Some errors were:
1. I forgot the ";" in the onload="preloadimage();"
2. If you write src="" in the <img> tag, it will first display the image with an empty source path (which works in Mozilla, but produces no image in IExplore, as I would expect). Getting rid of that and leaving only the name="" works.
3. If I don't write "var image = new Image();" and "image.src = "image.php?state=angry";", it won't work. This I can't really explain...

Now I have to find a way so that my image is displayed at the same time as the rest of the page, but this is another story...

Thanks for your good help !

TheJuice

Thanks for that it's seems perfect.

An update to my previous post:
The Javascript preloading seems to work with Mozilla, but not IExplore... Weird.

The_Chancer

Well there is an explanation...

Mozilla = good broswer
IE = .... need I say more ?