PHPEveryday.com PHP and Web Development Tutorial
What are you looking for?

PHP Login: Installation of phpSecureSite »

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: 10,060 Bookmark and Share

blog comments powered by Disqus


Database Tutorial
  • Learn PHP MySQL
  • Learn PHP ADOdb
  • Learn PHP Data Object/PDO
  • Learn PHP XML
  • Learn PHP SimpleXML
Security Tutorial
  • Learn PHP Security
  • Learn HTTP Authentication
  • Learn PHPSecureSite
Framework Tutorial
  • Learn CodeIgniter
  • Learn Joomla
  • Learn Smarty
  • Learn Zend Framework
Template Tutorial
  • Learn Joomla Template
  • Learn WordPress Template
API Tutorial
  • Learn Facebook
JS Framework Tutorial
  • Learn MooTools
  • Learn JQuery
AJAX Tutorial
  • Learn AJAX in 10 Minutes
  • Learn AJAX Client Side
  • Learn AJAX PHP
  • Learn AJAX Remote Server
  • Learn AJAX Repetitive
  • Learn AJAX MySQL
  • Learn AJAX Grid
Web Services Tutorial
  • Learn Web Services NuSOAP
  • Learn Web Services WSDL
  • Learn Web Services WSDL Array
  • Learn Web Services .NET Grid
  • Learn Web Services WDDX
Package Post
  • Joomla Intro
  • Joomla Component
  • Joomla Module
  • Joomla MVC
  • Joomla MVC Backend
  • PostNuke Intro
  • Zend Framework Intro
  • Zend Framework Action
  • Zend Framework Database
  • Zend Framework Registry
  • Zend Framework Config
  • Zend Framework Login
  • Zend Framework Session
  • PHP Array Tips
  • PHP File Tips
  • PHP Email
  • PHP Ms Excel
  • PHP Pattern
  • PHP SMS
  • Flash Database
  • PHP Multitier
  • jQuery Introduction
  • jQuery Selectors
  • Portable Web Server
  • Web Mobile Intro
  • Drupal Installation
  • Drupal Configuration