CODEWITHSUNDEEP
javascriptjqueryajax
Mohamed Ahmed
Mohamed Ahmed

Reputation: 21

How do I make an image until it is finished loading, AJAX jQuery

I want to make an image showing that the download process underway to complete bringing Page (2014.php) Such as wait.gif:

my example code is not working!!!! i need to make waiting image until page load... my page(2014.php) take a few minutes in this minutes i need make waiting image 

$('#data').load('test.php');

example:

<button>Click</button>
<div id="data"></div>

<script>
$(document).ready(function(){
 $('button').click(function(){
  $('#data').html('<img src="wait.gif" />');
  jQuery.ajax({
   url: "2014.php",
   success:function(data){$('#data').html(data);}
  });
 });
});
</script>

Upvotes: 2

Views: 190

Answers (2)

Sean Kendle
Sean Kendle

Reputation: 3609

First, put the image on the page, and just hide it with CSS, show it when you want it to be shown and hide it when it's finished with your AJAX query:

HTML:

<button>Click</button>
<img src="wait.gif" class="imgWait" />
<div id="data"></div>

CSS:

.imgWait {
    display: none;
}

Javascript:

<script>
    $(document).ready(function(){

        var $imgWait = $(".imgWait");  //cache your img reference in a variable

        $('button').click(function(){
            $imgWait.show(); //show the waiting image

            jQuery.ajax({
                url: "2014.php",
                success:function(data){
                    $('#data').html(data);
                    $imgWait.hide(); //hide the waiting image after success
                }
            });
        });
    });
</script>

Upvotes: 1

codelock
codelock

Reputation: 770

If you are looking for a "loading" generator for creating your loading image, there are many online free services such as:

http://www.loading.io
http://www.ajaxload.info
http://preloaders.net

I simply googled "Ajax loaders".

Where you simply choose a design, set some other options (optional) and finally generate the gif animation for you.

Hope it helps a bit!

Upvotes: 0

Related Questions