CODEWITHSUNDEEP
javascriptajax
Andrew
Andrew

Reputation: 7768

show LOADING until page is completely loaded

I have this javascript:

function createRequestObject(){
    var req;
    if(window.XMLHttpRequest){
        //For Firefox, Safari, Opera
        req = new XMLHttpRequest();
    }
    else if(window.ActiveXObject){
        //For IE 5+
        req = new ActiveXObject("Microsoft.XMLHTTP");
    }
    else{
        //Error for an old browser
        alert('Your browser is not IE 5 or higher, or Firefox or Safari or Opera');
    }
    //alert (req);
    return req;
}

//Make the XMLHttpRequest Object
var http = createRequestObject();

function sendRequestTwo(method, url, head1){
    head = head1
    if(method == "get" || method == "GET"){
        http.open(method,url);
        http.onreadystatechange = handleResponseTwo;
        http.send(null);

    }
}

var head; //divs name

function handleResponseTwo(){
    if(http.readyState == 4 && http.status == 200){
        var response = http.responseText;
        if(response){  
            document.getElementById(head).innerHTML = response;
        }
    }      
}

This part

            document.getElementById(head).innerHTML = response;

pastes the result back to my page. How can I show "Loading" Before the page is completely loaded?

Upvotes: 0

Views: 502

Answers (3)

Matt
Matt

Reputation: 1786

How about having a Div with your loading Html in the body like

<div id="loadingDiv" class="hiddenClass">Fancy rotating image goes here</div>

have a css class that says display:none; then you could use this before

http.onreadystatechange = handleResponseTwo;
var myDiv = document.getElementById('loadingDiv');
myDiv.className = "showClass";

then after

document.getElementById(head).innerHTML = response;

add

var myDiv = document.getElementById('loadingDiv');
myDiv.className = "hiddenClass";

All together

function createRequestObject(){
    var req;
    if(window.XMLHttpRequest){
        //For Firefox, Safari, Opera
        req = new XMLHttpRequest();
    }
    else if(window.ActiveXObject){
        //For IE 5+
        req = new ActiveXObject("Microsoft.XMLHTTP");
    }
    else{
        //Error for an old browser
        alert('Your browser is not IE 5 or higher, or Firefox or Safari or Opera');
    }
    //alert (req);
    return req;
}

//Make the XMLHttpRequest Object
var http = createRequestObject();

function sendRequestTwo(method, url, head1){
    head = head1
    if(method == "get" || method == "GET"){
        var myDiv = document.getElementById('loadingDiv');
        myDiv.className = "showClass";

        http.open(method,url);
        http.onreadystatechange = handleResponseTwo;
        http.send(null);

    }
}

var head; //divs name

function handleResponseTwo(){
    if(http.readyState == 4 && http.status == 200){
        var response = http.responseText;
        if(response){  
            document.getElementById(head).innerHTML = response;
            var myDiv = document.getElementById('loadingDiv');
            myDiv.className = "hiddenClass";
        }
    }      
}

Upvotes: 3

Mike Huang
Mike Huang

Reputation: 257

You can print the Loading into the Head div at the time of sendRequestTwo

Upvotes: 1

700 Software
700 Software

Reputation: 87763

I don't know the details of your HTML, but couldn't you just put loading in the tag that has an id="head"?

Then when you update the innerHTML, the loading would automatically be replaced. If you have more requirements, please describe.

Upvotes: 1

Related Questions