Temporary Image

[The Little Guy]

Not sure if this can be done with HTML/CSS/JavaScript/.htaccess or what, so...

 

What I would like to do, is show a "loading image" in place of the "original image" while the original image is loading. When the "original image" finishes loading, I would like the "loading image" to go away. Is this any any way possible?

[Daniel0]

So what will happen when the loading image is loading?

[The Little Guy]

it will be preloaded.

 

I use cURL, some GD Functions, and AJAX to get an image from somewhere on the internet.

 

What happens is, the user types in the link to the image in a text box, when the text box sees a valid file extension, it try's to retrieve the image, then ajax returns a resized version of the image (using GD).

 

try it: http://dudeel.com/siteBuilder/new (currently jpg only).

 

When the page loads the loading image would be preloaded, and I could just display it while the other image is loading.

 

does that make any sense???

[Daniel0]

Then why not just "preload" the image you are going to actually use instead? You cannot start loading something before the user requests it anyways.

[GingerRobot]

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.

[The Little Guy]

Then why not just "preload" the image you are going to actually use instead? You cannot start loading something before the user requests it anyways.

 

Because I don't know what image the user wants to use.

 

They select an image off the internet, place it in the box, while my server is retrieving then resizing the image, it take a little time, and the user will not know what is going on. An animated gif will be used until the image has finally processed.

 

I was thinking placing the two different images in two different div tags. one for the "loading image" (image that displays that the server is doing some sort of processing) and the "original image" (image that the user selected from the internet). I would then set the "loading image" to only display for 4 seconds using JavaScript. The problem with that would be that if the image still hasn't loaded, then the "loading image" wouldn't have shown up yet.

[GingerRobot]

Isn't that what the readyStates are for with ajax?

[The Little Guy]

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?

[The Little Guy]

OK I GOT IT!

 

Here is how its done for who ever...

 

1.) make a hidden div (display:none;) place your animated image that says loading or something like that.

2.) make your AJAX, it should return an image tag with an image.

3.) in your AJAX, in the readyState where it doesn't equal 4, make the style of your hidden div show (display:block;) and make the place where the image the AJAX will return hidden.

4.) in the image tag place an onload event, it will access some hide/show values.

5.) in your onload event, do the opposite of step 3.

 

Make Sense?