I am using PHP to create a image and at this moment in time calling it in to HTML using a img tag.
In the PHP file I am basically taking some transparant png files and changing the color based off the customers selection and overlaying it on a background color also based off a users selection. Then returning that final image to the HTML file. So for example all my png files are black and transparant and my background images are solid colors (red, blue, green, etc). So the customer may select a yellow png on a green background. I transform my black png into a yellow then overlay it on the green background and return that image.
My problem comes in that this process usually only takes a very short time (less than a second) but on occasion the server can take a few seconds to return the image, or on some peoples PCs they say they can see up to a 5 second delay before they see anything take effect. Because of this I would like to load the image using AJAX and if the image isn't ready then use a now loading logo.
I have used AJAX before but I can't figure out how to do this though. Usually you would hand AJAX a script you want to run in the background, in this case test.php which would make the image. And you would take the output that is returned and display it using a innerHTML for example. But because PHP is creating a temporary image it is a image being handed back. How can I display that when it is ready? Is there another method I could use?