Creating A Loading Image While Ajax Loads

This is the code I have. I'm trying to insert a image to show that ajax is loading but I just can't get this right; I tried a lot of possible ways but it just isn't working. Any su

Solution 1:

You can approach this in a couple of different ways, you can either

1. Preload image and create the element when the request is sent and destroy it after it's done
2. Create it along with the document and then hide it until the request is sent, and then hide it again when it's done
3. A combination of the two: Preload and create element in javascript, and from there just hide/show the element at each request/completion.

#1 Is probably most preferred when the request is rarely sent, since it doesn't interfere with the document's load, but rather loads after everything else is done. Since creating/destroying an element takes up more processing time than simply hiding/showing the element, this is not a recommended approach.

#2 Is preferred when the request is sent frequently, since you'll be using the loader image often, there is no need to create/destroy it and just have it available from the start. I recommend this approach.

#3 Is preferred when you want to play it safe. This doesn't load the image until the page is done loading and requires very little processing time.

Example #1 | Code

HTML

<div id='content'></div>

Javascript

var PreloadIt = new Image(441,291);
PreloadIt.src="loader.gif";

var http = new XMLHttpRequest();
var url = "thepage.php";
var params = "whatever=you&want=in+here";

http.open("POST", url, true);

http.onreadystatechange = function() {
    if(http.readyState == 4 && http.status == 200) {
        document.getElementById('content').removeChild(document.getElementById('ajaxloader'));
        document.getElementById('content').innerHTML = http.responseText
    }
}

function BeginLoading(){
    var eLoader = document.createElement("img");

    eLoader.src = "loader.gif";
    eLoader.alt = "";
    eLoader.id = "ajaxloader";

    document.getElementById('content').appendChild(eLoader);

    http.send(params);
}

BeginLoading();

---

Example #2 | Code

HTML

<div id='content'>
    <div id='ajaxloader'><img src="loader.gif" style="display: none"/></div>
</div>

Javascript

var http = new XMLHttpRequest();
var url = "thepage.php";
var params = "whatever=you&want=in+here";

http.open("POST", url, true);

http.onreadystatechange = function() {
    if(http.readyState == 4 && http.status == 200) {
        document.getElementById('ajaxloader').style.display = "none";
        document.getElementById('content').innerHTML = http.responseText
    }
}

function BeginLoading(){
    document.getElementById('ajaxloader').style.display = "block";
    http.send(params);
}

BeginLoading();

---

Example #3 | Code

HTML

<div id='content'></div>

Javascript

function CreateLoader(){
    var img = document.createElement("img");
    img.id = "ajaxloader";
    img.src = "loader.gif";
    img.alt = "";

    document.getElementById("content").appendChild(img);

    img.show = function(){ img.style.display = "block"; }
    img.hide = function(){ img.style.display = "none"; }

    img.hide();        

    return img;        
}

var eLoader = CreateLoader();

var http = new XMLHttpRequest();
var url = "thepage.php";
var params = "whatever=you&want=in+here";

http.open("POST", url, true);

http.onreadystatechange = function() {
    if(http.readyState == 4 && http.status == 200) {
        eLoader.hide();
        document.getElementById('content').innerHTML = http.responseText
    }
}

function BeginLoading(){
    eLoader.show();
    http.send(params);
}

BeginLoading();

Misc

I would recommend keeping track of the returned status. When a request fails, your code will return an error, since you're not handling it. Make sure that the request was a success and handle your errors.

You should also consider using encodeURIComponent(), if you've got data with special characters, like spaces and such.

var category = document.getElementById('category').value;
var brand = document.getElementById('brand').value;
var item = document.getElementById('item').value;

var url = "main_search_special.php"
var parameters = "section=special&category=" + encodeURIComponent(category) + "&brand=" + encodeURIComponent(brand) + "&item=" + encodeURIComponent(item);

ajaxRequest.open("GET", url+"?"+parameters, true);

ajaxRequest.onreadystatechange = function(){
    if(ajaxRequest.readyState == 4 && http.status == 200){
        var ajaxDisplay = document.getElementById('main_result');
        ajaxDisplay.innerHTML = ajaxRequest.responseText;
    }else{
        console.log("Request for \""+url+ "\" failed.");
    }
}

ajaxRequest.send();

Solution 2:

Just add the image to your display area before you send the request. The results will overwrite it when the request completes.

...
var ajaxDisplay = document.getElementById("main_result");
ajaxDisplay.innerHTML = "<img src='loading.gif' />"
ajaxRequest.send(null);

Solution 3:

I'd recommend putting the return action into its own function to make it look a little cleaner

But all you have to do to add an image is:

Before you do your send (basically anywhere in the function), create the image element and append to whatever element in your html you like

When you get a return from your ajax call, delete the image element.

Solution 4:

this is what you can do- set an image at your favorite position.make it's visibility to hidden.before making a call to php make it's visibility to visible and again after response from php file you can make your image's visibility to hidden. This is one of the way you can do this,there are also other ways.

search.onclick = function()
{
  var ajaxRequest;
  document.getElementById("image_loading").style.visibility = "visible";
  ajaxRequest.onreadystatechange = function(){
  if(ajaxRequest.readyState == 4){
    document.getElementById("image_loading").style.visibility = "hidden";                
    var ajaxDisplay = document.getElementById('main_result');
    ajaxDisplay.innerHTML = ajaxRequest.responseText;
  }
}
  $("#main_result").empty().html('<img src="loading.gif" />');
  var category = document.getElementById('category').value;
  var brand = document.getElementById('brand').value;
  var item = document.getElementById('item').value;
  var queryString = "&category=" + category + "&brand="+ brand +"&item="+ item;
  ajaxRequest.open("GET", "main_search_special.php?section=special" + queryString, true);
  ajaxRequest.send(null);
}