Question

我有一个HTML表单，它调用JS函数来验证字段。如果有任何错误，此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;
  }
}

实际功能更复杂，但逻辑就像上面这样。

谢谢！

Answer 1

它可以取决于调用验证的时间 - 如果它在$('#loading_div')完全加载之前，那么它将无效。

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

从评论中你说这就是它的名称：

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

Answer 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;
     }
   }

Answer 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;
        }
    }

Answer 4

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

此外，关闭元素的良好做法。添加结束斜杠。

Answer 5

是不是有) parens太多了？

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

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

Answer 6

另一个解决方案可能是从头开始在div中加载gif，但使用display: none;设置样式，并使用.toggle()

显示/隐藏它

Ajax加载GIF无法正常工作

6 个答案: