PDA

View Full Version : Animated circle while loading page.



cseca
03-21-2007, 11:45 AM
Hi

On some sites I see an animated circle when waiting for the next page to load. Is there a sample jscript about how to do this?

Carlos

thetestingsite
03-22-2007, 02:37 AM
Are you looking for something in AJAX or just something with the loading image in general. If you were using AJAX, here is a simple code snippet that you can use:

(Place between the <head> tags):



<script type="text/javascript">
var url = "test.php";
var XMLHttpRequestObject = false;

if (window.XMLHttpRequest) {
XMLHttpRequestObject = new XMLHttpRequest();
}

else if (window.ActiveXObject) {
XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHttp");
}

if(XMLHttpRequestObject) {
var obj = document.getElementById("div-id-here");
XMLHttpRequestObject.open("GET", url);
XMLHttpRequestObject.onreadystatechange = function()
{
if (XMLHttpRequestObject.readyState == 4 &&
XMLHttpRequestObject.status == 200) {
obj.innerHTML = XMLHttpRequestObject.responseText;
}

else {
obj.innerHTML = '<img src="loading.gif"> Loading';
}

}
XMLHttpRequestObject.send(null);
}

</script>


test.php:



<?php

echo 'Hello World!';

?>


and loading.gif is attached below.

Hope this helps.

EDIT: You can get more animated "loading" images by going to AJAXload.info (http://ajaxload.info/)