CODEWITHSUNDEEP
jqueryloading
Ilja
Ilja

Reputation: 46537

How to show loading gif image while content called via javascript is loading?

On my page I have javascript that loads new content in <div id="content"></div> from other page located at: inc/content.php. I would like to know how can I show animated gif image loading.gif in <div id="content"></div> while new content gets loaded into it? and once loaded hide gif and show new conntent?

Thank You ))) Here is my code:

<html>
<head>

<script type="text/javascript" src="js/jquery-1.6.4.js"></script>
<script type="text/javascript">
function viewNext()
{
$("#content").load("inc/content.php");
}
</script>

</head>
<body>

<button id="nextfLuky" onClick="viewNext();return false;">Next fLuky</button>

<div id="content"></div>

</body>
</html>

content in inc/content.php page:

<div id="text">Hello</div>

Upvotes: 3

Views: 22720

Answers (3)

472084
472084

Reputation: 17894

function viewNext(){
    $('#content').html('<img src="loading.gif" />').load("inc/content.php");
}

When you use load() it will replace anything in the element, including the gif so you dont have to manually hide it.

Upvotes: 9

max4ever
max4ever

Reputation: 12140

    $('#content').append('<img id="delete_me_spinner2" src="/images/ajax-loader.gif" border="0" style="text-decoration: none" alt="Loading" />');
    var y = $.post(.....)
                .complete(function(data) {
                $('#delete_me_spinner2').remove();
    //check ajax went ok
        });

Upvotes: 0

Senad Meškin
Senad Meškin

Reputation: 13756

function viewNext()
    {
    $('#content').html('<img src="/images/loading.gif" />');
    $("#content").load("inc/content.php");
}

This will do it.

Upvotes: 3

Related Questions