[RESOLVED] Show image before processing script

timus

Hi All

Is there a way to show an image before executing the rest of the script?

The only way I can think of is to use 2 pages, the first shows the image and has a java refresh to the second that has the script I want to process.

Any other suggestions please?

Many thanks

Tim

bpat1434

Define image:
1.) One you create using the GD functions with PHP
2.) An image already on your server you just need to show for a few moments

If it's a dynamic image (one made with GD) then you have to have a script that will make the image, and another script that will print out the <img> tag for it. Basically, the image creation script will make your image, then output a header with "Content-Type: image/png" (or whatever format you choose) and the other script will have the <img> tag with it's src attributed pointed to your image creation script.

The other alternative is just to use a plain old <img> tag with the src attribute pointed to the local file.

Now, you can "refresh" or send the browser elswhere one of two ways:

Meta method
You can use a meta header tag to send the browser elsewhere after a specified time:
<meta http-equiv="REFRESH" content="5;http://www.mydomain.com/members/" />

Javascript Method
You can use the window.location to send the window anywhere you want. You can specify a default pause period by using the setTimeout() function.

setTimeout('goAhead()', 5000); // Go after 5 seconds

function goAhead() {
  window.location = "http://www.mydomain.com/members/";
}

So, exactly what is it you want to do? Anything you're trying to emulate?

aksival

Are you just trying to preload an image?

timus

Morning all

Thanks for the replies

All i'm trying to do at the moment is show an image on the screen, something like "please wait" or an animated gif.

Once that is displayed on screen I want to then process a script, this might be a query that takes some time or an ftp transfer

Usually the whole php script has to execute before the image will be displayed and I was just wondering if there was a away forcing the screen to be displayed before the query or ftp starts.

I'm sure the methods that bpat1434 mentioned would work perfectly well and I've used something similar in the past, but i just wondered if there was a way to get round it without using redirects

Thanks

Tim

Kudose

You could use Ajax.

i.e.

The page loaded calls a script via Ajax and then you can do a redirect, or show more data via JS, based on the responseText from your called script ...

Hope that makes sense.

timus

I've been meaning to look at AJax...

I'll add it to my list

Thanks 🙂

tsbalaban

I have used all 3 methods of member bpat1434. Separately only the meta method works to redisplay a rotated image. The meta method keeps reloading the page (or image - JS method). How do I stop the repeating?

NogDog

<?php
ob_start();
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang='en'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=ISO-8859-1'>
<title>Untitled</title>
</head>
<body>
<p><img src="http://www.charles-reace.com/image/cornet.jpg" alt="cornet"><br>
Please wait...</p>
<?php
// output what we have so far:
ob_flush();
flush();
// simulate a further processing:
sleep(5);
echo "<p>All done</p>\n";
ob_end_flush();
?>
</body>
</html>

tsbalaban

Using the above code, it works in conjunction with the meta method the first time after the browser is opened. After that the code does not work even with a refresh (or reload) page. The previous image orientation persists.

Any advise appreciated.

Azala

This is what I do for my file upload forms...

Swap out the <input type="submit"...> with a <input type="button" onclick="processThisFormPlease()">

<script>
function processThisFormPlease(){
document.getElementById('someLayer').style.display = 'block';
document.myform.submit();
}
</script>

<div id="someLayer" style="position:absolute;z-index:1;left:50%;top:50%;height:200px;width:300px;background-color:#666666;border:1px solid #000000;display:none;">Put my animated gif here</div>

The hidden layer is shown before the form is submitted which will display it until the form is done uploading the file.

Not sure if this will help you though...

tsbalaban

I have resolved displaying images for before and after rotation. The problrm was caching of the image in the browser memory. I have found the below code in the book Programming PHP. Of course, you need output buffering with ob_start and ob_end_flush. I took out the meta method.

  header ("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
  header ("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
  header ("Cache-Control: no-store, no-cache, must-revalidate");
  header ("Cache-Control: post-check=0, pre-check=0", false);
  header ("Pragma: no-cache");

timus

Thanks for the help