how to do ajax loading using prototype downloaded

hi i have the javascripot framework in existing project which need me to update the ajax effect.
i have this downloaded http://www.prototypejs.org/

i am looking for how to do the ajax loading when the page is waiting the query to run? The page need to show a .gif picture Requesting data until the data are shown.

Pls help thanks

which prototype call are you using?



and they mostly share options

http://www.prototypejs.org/api/ajax/options

you could pick one of the callbacks and go off that event. when it hits the desired readystate you would have it drop your loading img in the element you're updating.

i just downloaded the ajax prototype as below and keep that code below in the .js file .

but may i know how do i connect to the javascript funciton below from my php page?

how do i fire the function fireContentLoadedEvent() from my php page ?
thanks


function() {
/* Support for the DOMContentLoaded event is based on work by Dan Webb,
Matthias Miller, Dean Edwards and John Resig. */

var timer;

function fireContentLoadedEvent() {
if (document.loaded) return;
if (timer) window.clearInterval(timer);
document.fire("dom:loaded");
document.loaded = true;
}

if (document.addEventListener) {
if (Prototype.Browser.WebKit) {
timer = window.setInterval(function() {
if (/loaded|complete/.test(document.readyState))
fireContentLoadedEvent();
}, 0);

Event.observe(window, "load", fireContentLoadedEvent);

} else {
document.addEventListener("DOMContentLoaded",
fireContentLoadedEvent, false);
}

} else {
document.write("<script id=__onDOMContentLoaded defer src=//:><\/script>");
$("__onDOMContentLoaded").onreadystatechange = function() {
if (this.readyState == "complete") {
this.onreadystatechange = null;
fireContentLoadedEvent();
}
};
}
})();

var loaded = false;
function startLoading(){
loaded =false;
window.setTimeout('showLoadingImage()',10);
}

function showLoadingImage(){
var box = document.getElementById("loading_pic");
if(box && !loaded){
box.innerHTML ='"../images/indicator.gif" />';
new Effect.Appear('loading_pic');
}
}

function stopLoading(){
Element.hide('loading_pic');
loaded = true;
}



then i put my ajax fuction into .js page.

Ajax.Responders.register({
onCreate : startLoading,
onComplete : stopLoading
});


but i am not able to display the effect

"new Effect.Appear('loading_box');"
"Effect is not defined"

also
Element.hide('loading_pic');
element also not defined..

may i knwo what this things happen ?

how do i fire the function fireContentLoadedEvent() from my php page ?

-You can call it on body's onload event