Question

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

下面的脚本看起来像<head>。

<script type="text/javascript">

// loader on form submit

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

 // the page load 'Loader'

  $(window).load(function() {
  $(".imageCarryingDiv").fadeOut();;
  });
</script>

和<div>内的<body>看起来像这样：

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

问题在于＃Loader＆＃39;在页面加载行为符合预期，但是当提交表单时，页面加载＆＃39;加载器＆＃39;再次出现。我知道这是因为在提交表单时再次加载页面。您如何建议我避免这种情况，即加载器仅在预期出现的位置出现时，一个在页面上加载而另一个在表单上提交。

Answer 1

您需要阻止触发表单的默认行为，以便在提交表单时不会重新加载页面。以下是preventDefault()：

的使用方法

$(document).ready(function() {
  $('#myform').submit(function(e) {
    // Use prevent default to avoid page reload
    e.preventDefault();
    $('#loaderImage').show();
    return true;
  });
});

preventDefault()的文档：http://www.w3schools.com/jsref/event_preventdefault.asp

Answer 2

由于页面将在提交后重新加载，页面的加载程序将再次出现。您可以通过将表单提交转换为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();
});

这样，页面就不会重新加载，页面的加载器也只会出现一次。

单个PHP页面中的两个加载器

2 个答案: