Ajax 加载 GIF 不工作答案

【问题标题】：Ajax loading GIF not workingAjax 加载 GIF 不工作
【发布时间】：2014-02-24 04:37:06
【问题描述】：

我有一个调用 JS 函数来验证字段的 HTML 表单。如果有任何错误，此 JS 函数返回 false，否则返回 true 并将加载 GIF 添加到适当的 DIV。

问题是加载的 GIF 从未出现在浏览器中。它只是显示一个空白区域。 GIF 路径是正确的。仅当我的验证函数在添加加载 GIF 后返回 false 而不是 true 时才有效。

这是我的代码的示例：

function validate()
{
  if (document.getElementById('email').value === '')
  {
    alert('Please enter your email');
    return false;
  } else {
    $('#loading_div').html('<img src="images/info-loading.gif" />');
    return true;
  }
}

实际功能比较复杂，但逻辑就是上面这样。

谢谢！

【问题讨论】：

那是因为正在执行表单动作，正在加载一个新页面
控制台是否显示任何JS错误？您也缺少来自$('#loading_div) 的撇号。
if ((document.getElementById('email')).value === '')
您是否尝试使用 div 内部的 append 函数，而不是 .html 来添加图像？
请从脚本错误中更正您的代码。

标签： javascript jquery ajax gif

【解决方案1】：

它可能取决于何时调用验证 - 如果是在 $('#loading_div') 完全加载之前，那么它将不起作用。

虽然 AJAX 调用是异步的，比如 DOM 渲染不是 - 当加载的 gif 应该显示时，你想做什么？

从您所说的 cmets 来看，它是这样称呼的：

<input type="Submit" id="Login" value="Login" onclick="return validate();">

此代码意味着当validate() 返回 false 时，按钮什么也不做，当它返回 true 时，提交按钮继续并执行其默认行为 - 即提交表单。一旦表单提交开始，页面将被卸载，因此不会加载任何其他资源。

您可以尝试先加载微调器，例如：

function validate() {
    if (document.getElementById('email').value === '') {
        alert('Please enter your email');
        return false;
    }  else {
        // Set the loading image
        $('#loading_div').html('<img src="images/info-loading.gif"/>');

        // Submit the form 200ms later
        var $form = $(this).parents('form');
        window.setTimeout(function() {$form.submit();}, 200);

        // Return false so that the form post back doesn't start right away.
        return false;
    }
}

【讨论】：

其实#loading_div是一个空的div，我用它只是为了显示附加代码来显示加载的GIF。
@delphirules 这不是我的意思——DOM 内容加载了吗？假设它有 - 你在什么背景下触发validate()？页面加载？ DOM 内容完整吗？在$.ajax 通话之前？
是的，页面加载完毕；当用户单击登录按钮时，我调用 validate()，就像这样：
工作！谢谢你:)

【解决方案2】：

您有语法错误。它显示在您的问题突出显示中。你没有关闭选择器报价。你还有额外的)。

替换这个：

   function validate {
    if (document.getElementById('email')).value === '') {
      alert('Please enter your email');
      return false;
    }  else {
    $('#loading_div).html('<img src="images/info-loading.gif">');
    return true;
    }
}

作者：

   function validate {
    if (document.getElementById('email').value === '') {
      alert('Please enter your email');
      return false;
    }  else {

    $('#loading_div').html('<img src="images/info-loading.gif">');
        return true;
     }
   }

【讨论】：

谢谢，但实际代码没有错误，我只是在问题中输入错误

【解决方案3】：

您有语法错误。

 function validate() {
        if (document.getElementById('email').value === '') {
          alert('Please enter your email');
          return false;
        }  else {
        $('#loading_div').html('<img src="images/info-loading.gif"/>');
        return true;
        }
    }

【讨论】：

谢谢，但实际代码没有错误，我只是在问题中输入错误。

【解决方案4】：

您是否尝试添加到页面以测试文件路径是否有效？

另外，关闭元素的好习惯。添加右斜杠。

【讨论】：

是的，路径是正确的；如果我在添加 GIF 后在验证函数中返回 FALSE，它可以工作。

【解决方案5】：

) 括号是不是太多了？

if (document.getElementById('email')).value === '') {
                                    ^ what is this?

通过重新编辑您的代码，我纠正了更多语法错误。现在它应该可以工作了。

【讨论】：

谢谢，但实际代码没有错误，我只是在问题中输入错误

【解决方案6】：

另一种解决方案可能是从一开始就在 div 中加载 gif，但使用 display: none; 设置样式，并使用 .toggle() 显示/隐藏它

【讨论】：

很酷的方法，但在这种情况下，我会预加载一个我真的不知道是否有必要的图像；例如，用户可以取消操作。