CODEWITHSUNDEEP
jqueryajax
RGS
RGS

Reputation: 4253

how to add loading text in a .load function?

I have this jquery function to load a page based on a href link:

<script type="text/javascript">
    $(document).ready(function(){
        $("#test a").click(function( e ){
            e.preventDefault();
            var href = $( this ).attr('href');
            $("#content").load( href , function(){
            $('#content').hide().fadeIn(500);
            });
        });
    });
    </script>

My question is, how to show loading div while the href page is loading?

<div id=loading>LOADING...</div>

thank you friends!

Upvotes: 1

Views: 659

Answers (2)

ojovirtual
ojovirtual

Reputation: 3362

Do the loadingdiv hidden by default:

#loading{
    display: none;
}

Then, show it BEFORE you call load and hide it in the callback function.

....
var href = $( this ).attr('href');
$("#loading").show();
$("#content").load( href , function(){
        $("#loading").hide();
....

Upvotes: 1

Nivs
Nivs

Reputation: 374

You may do like this way:

<script type="text/javascript">
$(document).ready(function(){
    $("#test a").click(function( e ){
        e.preventDefault();
        $("#loading").html("Loading");
        var href = $( this ).attr('href');
        $("#content").load( href , function(){
        $('#content').hide().fadeIn(500);
        });
       $("#loading").html("");
    });
});
</script>

Upvotes: 1

Related Questions