Have Geek Brain

Adding a boot gif to a simple script

I'm really very new to Javascript, but Ive got this script that loads the content of the url and everything works fine. I am calling the plannerSpin function using the onClick method on the button, but how would I display the animated gif while this is all happening?

var xmlHttp
function plannerSpin(str) {
    xmlHttp = GetXmlHttpObject()
    if (xmlHttp == null) {
        alert("Browser does not support HTTP Request")
        return
    }
    var url = "/recipes/planner/data"
    xmlHttp.onreadystatechange = stateChanged
    xmlHttp.open("GET", url, true)
    xmlHttp.send(null)
}
function stateChanged() {
    if (xmlHttp.readyState == 4 || xmlHttp.readyState == "complete") {
        document.getElementById("recipe_planner_container").innerHTML = xmlHttp.responseText
    }
}
function GetXmlHttpObject() {
    var xmlHttp = null;
    try {
        // Firefox, Opera 8.0+, Safari
        xmlHttp = new XMLHttpRequest();
    } catch (e) {
        // Internet Explorer
        try {
            xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
    }
    return xmlHttp;
}
+2


a source to share


2 answers


There are so many ways ... for example: you can have a hidden image:

<div id='loading' style='display:none'><img src='img.gif'></div>

and show it as soon as you start the AJAX request:

document.getElementById('loading').style.display = 'inline';


Then you hide the image again after the request completes:

if (xmlHttp.readyState == 4 || xmlHttp.readyState == "complete"){
    document.getElementById('loading').style.display = 'none';
    document.getElementById("recipe_planner_container").innerHTML = xmlHttp.responseText;
}

Or you can use jQuery, Prototype, Mootools or any other JS library you want.

Bye!

+1


a source


You can add loading gif to the beginning of plannerSpin and remove in stateChanged function. Sort of:



var img;
function plannerSpin(str) {
    img=document.createElement("img");
    img.src="image/path";
    //Here you can set some style for the image like an absolute position
    document.body.appendChild(img);
    ....
}


function stateChanged() {
    ...
    document.body.removeChild(img);
}
0


a source






More articles:


All Articles