在 jquery ajax 工作时添加动画图像答案

【问题标题】：adding a animated image while jquery ajax is working在 jquery ajax 工作时添加动画图像
【发布时间】：2011-06-20 06:26:40
【问题描述】：

我正在使用 Jquery Ajax，我的代码如下所示

 $.get(
    'GetPage.aspx',
    'url=' + url ,
    function (response) {
        if (!cancelNavigationFlag)
            setIframeHtml(response);
        cancelNavigationFlag = false;
    },
    'html'
);

我需要添加一个动画 gif，它会在 ajax 工作时出现，然后在 ajax 完成时消失。

我该怎么做？

【问题讨论】：

标签： jquery ajax animated-gif

【解决方案1】：

我有不同的逻辑和解决方案。

在您希望 gif 图像显示为 <div id="loader"> 的位置设置一个 div。

接下来，在css中设置背景图片，不要设置图片链接之类的；

background: no-repeat center;

当ajax执行时，给它一个背景图片loader.gif，并在ajax任务完成时将其移除，比如；

 $.get(
    $("#loader").css({ 'background-image':'url(images/loader.gif)' });
    'GetPage.aspx',
    'url=' + url ,
    function (response) {
        if (!cancelNavigationFlag)
            setIframeHtml(response);
        cancelNavigationFlag = false;
        $("#loader").css({ 'background-image':'url()' });
    },
    'html'
);

我自己没有测试过..希望这会有所帮助..

【讨论】：

谢谢。它对我有用。任何想法为什么它只适用于 Firefox 而不是 chrome？
让我看看..你在IE中测试过吗？？
我没有测试 IE，因为我的网站在这一点上根本无法在 IE 上运行。
你用的是最新版的chrome吗？？
我正在使用这个版本 12.0.742.100

【解决方案2】：

我通常会这样做：

$("#indicatordiv").show();
$.post("somepage", function(result){ 
    $("#indicatordiv").hide();
})

其中“indicatordiv”是一个简单的 div 元素，其中包含加载程序 gif 图像。

因此，在您的情况下，只需“.show()”获取请求之前的元素，并在响应函数中使用“.hide()”即可。

【讨论】：

【解决方案3】：

您可以添加一个 div，其中包含带有加载器图像的图像标签。最初隐藏 div。在调用 ajax 请求之前显示 div。并在从 ajax 请求中获取数据后隐藏 div。

$("#dvLoader").show();
$.get(
    'GetPage.aspx',
    'url=' + url ,
    function (response) {
        if (!cancelNavigationFlag)
            setIframeHtml(response);
        cancelNavigationFlag = false;
    },
    'html'
    success:
         function(data)
         {
            $("#dvLoader").hide();
         }

);

dvLoader 包含加载器图像。

【讨论】：

您必须在 $.get() 成功回调中再次显示它。使用此代码，#dvLoader 将在调用 $.get() 后隐藏，而不是在加载内容后。