Couldn't you just have a loading image show once the ajax function is called? The source of the image would then be changed once the request is complete.
That is what I am doing, i think...
The JavaScript:
function getImg(){
var contentType = "application/x-www-form-urlencoded; charset=UTF-8";
var ajaxRequest;
try{
ajaxRequest = new XMLHttpRequest();
} catch (e){
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
alert("Your Browser Doesn't support AJAX.");
return false;
}
}
}
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState != 4){
document.getElementById('showImage').innerHTML = '<strong>Loading, one moment.</strong>';
}
if(ajaxRequest.readyState == 4){
document.getElementById('showImage').innerHTML = ajaxRequest.responseText;
}
}
var getImg = document.getElementById('backgroundImage').value;
var pattern = new RegExp(".(jpg|gif|png)");
var result = pattern.test(getImg);
if(result){
var va = 'url='+getImg;
ajaxRequest.open("POST", '/process/build/testImg', true);
ajaxRequest.setRequestHeader("Content-Type", contentType);
ajaxRequest.send(va);
}
}
The code to return an image tag:
$allowed = array('jpg','gif','png');
$pos = strrpos($_POST['url'], ".");
$str = substr($_POST['url'],($pos + 1));
if(!in_array($str,$allowed)){
echo '<strong>Invalid Image, please choose another image.</strong>';
}else{
echo'<img src="/process/build/newTempImg.php?url='.$_POST['url'].'" />';
}
The code that builds the image:
$url = $_GET['url'];
$ch = curl_init();
$timeout = 0;
curl_setopt ($ch, CURLOPT_URL, $url);
curl_setopt ($ch, CURLOPT_CONNECTTIMEOUT, $timeout);
// Getting binary data
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_BINARYTRANSFER, 1);
$image = curl_exec($ch);
curl_close($ch);
// output to browser
header("Content-type: image/jpeg");
//echo $image;
$im = imagecreatefromstring($image);
$tw = imagesx($im);
$th = imagesy($im);
$thumbWidth = 100;
$thumbHeight = $th * ($thumbWidth / $tw);
$thumbImg = imagecreatetruecolor($thumbWidth, $thumbHeight);
imagecopyresampled($thumbImg, $im, 0, 0, 0, 0, $thumbWidth, $thumbHeight, $tw, $th);
imagejpeg($thumbImg, NULL, 100);
imagedestroy($thumbImg);
The current problem that is occurring, is that the image tag is being returned, but the image that the user choose still has not been sent yet. When the tag is returned, it has to do another processing step, but the ajax thinks processing is done, because a img tag was returned.
is there a JavaScript function that can check to see if an image has completely loaded, and not just the tag?
