AJAX: Loading Preloader Animation Image Step By Step Tutorial

The best tutorial of php, php framework, php strategies, object oriented oriented,

AJAX: Loading Preloader Animation Image

Tag: ajax Category: PHP Basic
post: 27 Dec 2007 read: 4,501

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>

| Give Your Opinion | Recommend

Share and Bookmark to: These icons link to social bookmarking sites where readers can share and discover new web pages.

615

posting

Your Name *	:
Email *	:	(Will not be published)
Website/URL	:
Your Comment *	:

* Required

PHP Basic	PHP Classes	PHP Framework	PHP Application	PHP Security	PHP Editor
PHP Books	PHP Database	MySQL	Hosting	Apache	CSS
Motivation	Web Design	PHP API	JavaScript	Computer Tips

phpeveryday.com

The best tutorial of php, php framework, php strategies, object oriented oriented,

AJAX: Loading Preloader Animation Image