CODEWITHSUNDEEP
javascriptjqueryajaxloadloading
Gost BJ
Gost BJ

Reputation: 29

Image loading before loading a page with get()

How to display a gif image during the loading ?

i use get.

function getCurrentUrl() {
    $(
        $.get(
            "page1.html", 
            function (data) {
                $("#divReceptLoad").empty().append(data);
            },
           'html'
        )
    );
}

than you very much if you can help me :)

Upvotes: 2

Views: 242

Answers (2)

Fabrício Matté
Fabrício Matté

Reputation: 70149

Create a <img id="loading" src="..." style="display:none;" /> then:

function getCurrentUrl() {
    $('#loading').show(); //show it before sending the ajax request
    $.get("page1.html", function (data) { 
        $('#loading').hide(); //hide in the callback
        $("#divReceptLoad").empty().append(data);
    },'html'));
}

Feel free to add more styling/positioning to the image and replace the basic show/hide methods with fadeIn/fadeOut, slideDown/slideUp or other effects if you fancy.

Here's a loading GIF generator and another in case you don't want to grab one from Google Images.

And here's a nice collection of premade ones.

Upvotes: 4

Ram
Ram

Reputation: 144689

function getCurrentUrl() {
     $('#gif').fadeIn() // show the hidden gif
     $.get("page1.html", function(data){
        $('#gif').hide() // hide it
        $("#divReceptLoad").empty().append(data);
     },'html')    
}

Upvotes: 1

Related Questions