CODEWITHSUNDEEP
javascriptphpjquerycssajax
Robert
Robert

Reputation: 2824

how to show image when loading ajax

i want to show image when ajax is loading the page then hide it again
then i try this code but the image don't show first all done at the same time ( the php page take about 3 seconds to load ) so when i remove the comment from the line $("img").css("display","none"); the image never appear
here the full code

$(document).ready( function(){
    $("#al").click(function(){
        $("img").css("display","inline");
        xmlhttp=new XMLHttpRequest();
        xmlhttp.open("GET","ajax load.php",false);
        xmlhttp.send();
        document.getElementById("showhere").innerHTML=xmlhttp.responseText;
//  $("img").css("display","none");
    });
});

Upvotes: 1

Views: 1094

Answers (5)

ajitksharma
ajitksharma

Reputation: 2019

Use CSS 

#Loading {
    background:url(images/abc.gif) no-repeat center center;
    height: 64px;
    width: 64px;
    position: fixed;
    z-index: 1000;
    left: 50%;
    top: 50%;
    margin: -25px 0 0 -25px;
}

Use HTML

<div id="Loading" class="dvLoading">
</div>

And thn at before Ajax call show the div and after Ajax call hide the div

$('.dvLoading').show(); 
$('.dvLoading').hide();

Upvotes: 4

James M. Lay
James M. Lay

Reputation: 2470

You should wrap everything after the display inline in a setTimeout function with a 2-5 ms delay:

$(document).ready( function(){
    $("#al").click(function(){
        $("img").css("display","inline");
        setTimeout(function() {
            xmlhttp=new XMLHttpRequest();
            xmlhttp.open("GET","ajax load.php",false);
            xmlhttp.send();
            document.getElementById("showhere").innerHTML=xmlhttp.responseText;
            $("img").css("display","none");
        }, 2);
    });
});

I'm not sure what the main problem is, but I know that with CSS, sometimes changing properties acts like an asynchronous action. Speculating, I think you have a race condition in which the css changes compete with the request and they end up happening all at the same time. This hack essentially tells the request to wait a few milliseconds which allows the css change to append in the asynchronous queue before the request.

Upvotes: 0

Satpal
Satpal

Reputation: 133403

As you are already using jQuery, thus use .load(), and hide image on its callback method

$(document).ready(function () {
    $("#al").click(function () {
        $("img").css("display", "inline");
        $("#showhere").load("ajaxload.php", function () {
            $("img").css("display", "none");
        });
    });
});

Upvotes: 2

Volkan Ulukut
Volkan Ulukut

Reputation: 4218

just use jquery ajax $.get function (I take it the php filename is ajax_load.php?):

$(document).ready( function(){
    $("#al").click(function(){
        $("img").css("display","inline");
        $.get("ajax_load.php","",function(data) {
            document.getElementById("showhere").innerHTML = data;
            $("img").css("display","none");
        });
    });
});

Upvotes: 2

pid
pid

Reputation: 11597

You already use jQuery so you can leverage the standard ajax facility which takes many options among which a success and error function: jQuery AJAX

In these two functions you should put

$("img").css("display","none");

While the display:inline goes one line above the call to send the ajax request.

Upvotes: 1

Related Questions