How to show loading gif image while content called

2019-03-31 13:18发布

站内问答 / jQuery
405 3 5

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>

3条回答
ゆ 、 Hurt°
2楼-- · 2019-03-31 14:13 
function viewNext()
    {
    $('#content').html('<img src="/images/loading.gif" />');
    $("#content").load("inc/content.php");
}

This will do it.

查看更多
0人赞 添加讨论(0) 举报
Ridiculous、
3楼-- · 2019-03-31 14:14 
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.

查看更多
0人赞 添加讨论(0) 举报
Rolldiameter
4楼-- · 2019-03-31 14:19 
    $('#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
        });
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)