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

Question

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>

score 9 · Accepted Answer · answered Oct 14 '11 at 15:37

9

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.

answered Oct 14 '11 at 15:37

472084

17,666
10
63
81

It shows gif image for a while and than it goes away, but no content gets displayed. – Ilja Oct 14 '11 at 15:45
3

omg, sory the color of text is white thats why I didn't see it ))) – Ilja Oct 14 '11 at 15:52

score 3 · Answer 2 · answered Oct 14 '11 at 15:28

3

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

This will do it.

answered Oct 14 '11 at 15:28

Senad Meškin

13,597
4
37
55

I'll try it now ))) Just in case, I assumed before that I would have to set display none and than on load set display to block for
or is it unnecessary and am I wrong? – Ilja Oct 14 '11 at 15:30

score 0 · Answer 3 · answered Oct 14 '11 at 15:32

0

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

answered Oct 14 '11 at 15:32

max4ever

11,909
13
77
115

$.load is a wrapper to ease things using $.get, $.get is similar to $.post, and both $.post and $.get are wrappers for $.ajax :) check http://api.jquery.com/load/ for details, i only wanted to specify that you add the image before requesting ,and then delete it after – max4ever Oct 14 '11 at 15:39

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

3 Answers3

Linked