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>

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.

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

This will do it.

    $('#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
        });

来源：https://stackoverflow.com/questions/7769892/how-to-show-loading-gif-image-while-content-called-via-javascript-is-loading

标签

jquery