Javascript 一个PHP页面中的两个加载程序

我正在尝试嵌入两个“加载器”，一个是当页面加载时，另一个是当用户在加载的页面上提交表单时

脚本如下所示，它位于

中

//提交表格时的加载器
$（文档）.ready（函数（）{
$（'#myform'）。提交（函数（）{
$（'#loaderImage'）.show（）；
返回true；
});
});
//页面加载“加载器”
$（窗口）。加载（函数（）{
$（“.imagecarryngdiv”）.fadeOut（）；；
});

还有一个

里面的

，看起来像这样：

<div class="imageCarryingDiv"><img src="../images/loader.gif" style="height:30px; width:auto;" class="loaderImgx" alt=""><br>Loading...</div>

正在加载。。。

---

问题是页面加载上的“加载器”的行为与预期一致，但是当表单提交时，页面加载“加载器”再次出现。我理解这种情况，因为提交表单时页面会再次加载。您建议我如何避免这样的情况，即加载程序仅在预期出现的位置出现，一个在页面加载，另一个在表单提交

您需要防止触发表单的默认行为，以便在提交表单时不会重新加载页面。下面是如何使用

preventDefault（）

：

---

preventDefault（）

此处的文档：

您需要防止触发表单的默认行为，以便在提交表单时不会重新加载页面。下面是如何使用

preventDefault（）

：

---

preventDefault（）

此处的文档：

由于提交后将重新加载页面，页面的加载程序将再次出现。您可以通过将表单提交转换为ajax请求来更改它，如下所示：

$('#myform').submit(function(e) {
  $('#loaderImage').show(); 
    return true;
  });

  data = $('#myform').serialize();

    $.ajax({
        url: url,
        type: "post",
        data: data,
        dataType: "json",
        success: function(response){
            $('#loaderImage').hide(); 
        }
    });
    e.preventDefault();
});

---

这样，页面将不会重新加载，页面加载器将只显示一次。

由于提交后页面将重新加载，页面加载器将再次显示。您可以通过将表单提交转换为ajax请求来更改它，如下所示：

$('#myform').submit(function(e) {
  $('#loaderImage').show(); 
    return true;
  });

  data = $('#myform').serialize();

    $.ajax({
        url: url,
        type: "post",
        data: data,
        dataType: "json",
        success: function(response){
            $('#loaderImage').hide(); 
        }
    });
    e.preventDefault();
});

---

这样，页面将不会重新加载，页面的加载程序只会出现一次。

恐怕我真的看不出这两组代码位于不同位置的原因。您可以添加

$（'.imageCarryingDiv'）.fadeOut（）代码到
$（document）.ready（）
函数的最顶端，它应该是完全相同的。恐怕我真的看不出这两组代码位于不同位置的原因。您可以添加
$（'.imageCarryingDiv'）.fadeOut（）
code到
$（文档）.ready（）
函数的最顶端，它应该完全相同。@paugv我看到
preventDefault（）
如果正确，将停止提交表单。我假设我的表单验证没有发生（PHP表单验证），它只是显示加载程序。你有什么建议给我吗？@MohanWijesena你可能想像克劳斯建议的那样，用Ajax提交表单数据。我想你也可以删除
e.preventDefault（）
并在提交表单时设置cookie，设置cookie时你不会显示图像，但Ajax可能是最好的。@paulgv我看到
preventDefault（）
如果正确，会停止提交表单。我假设我的表单验证没有发生（PHP表单验证），它只是显示加载程序。你有什么建议给我吗？@MohanWijesena你可能想像克劳斯建议的那样，用Ajax提交表单数据。我想你也可以删除
e.preventDefault（）
，在提交表单时设置cookie，设置cookie时你就不会显示图像，但Ajax可能是最好的。
$('#myform').submit(function(e) {
  $('#loaderImage').show(); 
    return true;
  });

  data = $('#myform').serialize();

    $.ajax({
        url: url,
        type: "post",
        data: data,
        dataType: "json",
        success: function(response){
            $('#loaderImage').hide(); 
        }
    });
    e.preventDefault();
});