AJAX: Loading Preloader Animation Image



AJAX Tutorial: In this post, we add something that make user know ajax still works. We called preloader. It will help user to know where part of page will change. It also add more attractive to our web.

You can use many preloader like this:





Ok, we try to use it. Open test.php in previous practice. Replace with following code:

<html>
<head>
	<SCRIPT language="JavaScript" SRC="ajax.js"></SCRIPT>
</head>
<body onload="callAJAX('home.html','displaydiv' , '<center>
<img src=loading6.gif></center>')">
<a href="#" onclick="callAJAX('home.html','displaydiv', '<center>
<img src=loading6.gif></center>')">Home</a>
<a href="#" onclick="callAJAX('news.html','displaydiv', '<center><img 
src=loading6.gif></center>')">News</a>
<a href="#" onclick="callAJAX('about.html','displaydiv', '<center><img 
src=loading6.gif></center>')">About</a>
<table>
<tr>
<td id="displaydiv"></td>
</tr>
</table>

</body>
</html>


Series this article:
AJAX : Understanding AJAX
AJAX: Shortcut to AJAX
AJAX: Loading Web Content from Links
AJAX: Loading Preloader Animation Image


Tag: ajax Category: PHP Basic Post : December 27th 2007 Read: 9,855 Bookmark and Share

blog comments powered by Disqus