如何在加载通过 javascript 调用的内容时显示加载 gif 图像？答案

【问题标题】：How to show loading gif image while content called via javascript is loading?如何在加载通过 javascript 调用的内容时显示加载 gif 图像？
【发布时间】：2011-10-14 23:37:10
【问题描述】：

在我的页面上，我有 javascript 可以从位于 inc/content.php 的其他页面加载 <div id="content"></div> 中的新内容。我想知道如何在加载新内容时在<div id="content"></div> 中显示动画gif 图像loading.gif？并且一旦加载隐藏 gif 并显示新内容？

谢谢你）））这是我的代码：

<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>

inc/content.php 页面中的内容：

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

【问题讨论】：

标签： jquery loading

【解决方案1】：

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

当您使用 load() 时，它将替换元素中的任何内容，包括 gif，因此您不必手动隐藏它。

【讨论】：

它显示gif图像一段时间然后消失，但没有显示任何内容。
天哪，抱歉文字的颜色是白色的，所以我没有看到它）））

【解决方案2】：

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

这样就可以了。

【讨论】：

我现在就试试 ))) 以防万一，我之前假设我必须设置 display none 而不是在加载集显示时阻止
还是没有必要，我错了吗？

【解决方案3】：

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

【讨论】：

$.load 是一个使用 $.get 简化事情的包装器，$.get 类似于 $.post，并且 $.post 和 $.get 都是 $.ajax 的包装器 :) 检查api.jquery.com/load详情，我只想指定你在请求之前添加图像，然后再删除它