CODEWITHSUNDEEP
jqueryhtmlajax
CARASS
CARASS

Reputation: 245

Setup a loading gif until AJAX is loading items

I am loading some content from another page and specific div (#hottel-list) (Rezults2.php) into my current page (Main.php) on the div (#hotel-list).

On the Main.php page i have:

 <div id="hotel-list" class="hotel-list listing-style3 hotel">
   Here goes the content loaded by jQuery AJAX load[]
 </div>

And the jQuery AJAX load() code is :

var datastring = location.search; // now you can update this var and use
$("#hotel-list").load("Rezults2.php" + datastring + " #hotel-list> *");

My question : how Can i set a loading image before the content is loaded

Have any ideeea ?

Upvotes: 0

Views: 352

Answers (2)

Just code
Just code

Reputation: 13801

HTML:

 <img src="loading.gif" class="loading" />

Jquery:

    $('.loading').show();//for an instance I assume you have some event predefined on the top *onclick* or *something else* 
    var datastring = location.search;
    $("#hotel-list").load("Rezults2.php" + datastring + " #hotel-list> *",function()
    {
       alert( "Load was performed." );
       $('.loading').hide();
    });

CSS:

.loading
{
display:none;
}

Explanation: you need to put loading image which will be hidden by default..then as you can see in our code the image is shown and once data is loaded we are hiding that loading image simple!

Upvotes: 2

cyber_rookie
cyber_rookie

Reputation: 665

var datastring = location.search; // now you can update this var and use
// load your image on starting load
$("#hotel-list").load("Rezults2.php" + datastring + " #hotel-list> *", function() {
    // callback after load is complete
});

Upvotes: 0

Related Questions