发送电子邮件时如何显示加载gif？

Question

我有一个与php，jquery，ajax的联系表，其工作正常，但未显示邮件发送过程。 因此人们认为它不起作用，并不断点击发送按钮。

我想在发送电子邮件时显示加载图像。

这是我缩短的html表格：

$(document).ready(function(){
    $('#load-image').hide()
    $("form").submit(function(event){
        event.preventDefault();
        $('#load-image').show();
        var name =$("#mail-name").val();
        var email =$("#mail-email").val();
        var subject =$("#mail-subject").val();
        var message =$("#mail-message").val();
        var captcha =$("#mail-captcha").val();
        var departman =$("#mail-departman").val();
        var submit =$("#mail-submit").val();
        $(".form-message").load("heads/contact.php",{
            name: name,
            email: email,
            subject: subject,
            message: message,
            captcha: captcha,
            departman: departman,
            submit: submit
        },function(){
            $('#load-image').hide();
            });
    });
});

.load-image{
  border: 16px solid #f3f3f3; /* Light grey */
  border-top: 16px solid #3498db; /* Blue */
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
		<form action="heads/contact.php" method="post">
				<input type="text" id="mail-name" name="name" placeholder="Name..">  
				<br />
			<p class="form-message"></p>
				<br />
				<div id="load-image" style="visibility: hidden;"/>
				<img src="image/giphy.gif" width="31" height="31" alt="Loading image"/>
				</div>
				<br />
			<button id="mail-submit" type="submit" name="submit">submit</button>
		</form>

我已经尝试过了，但是它显示了通过页面加载加载图像。

这是我注入的代码：

   `$(document).ready(function(){
   $('#mail-submit').submit(function(){
      $('#load-image').show();
});`

我的总代码如下：

$(document).ready(function(){
    $('#load-image').hide()
    $("form").submit(function(event){
        event.preventDefault();
        $('#load-image').show();
        var name =$("#mail-name").val();
        var email =$("#mail-email").val();
        var subject =$("#mail-subject").val();
        var message =$("#mail-message").val();
        var captcha =$("#mail-captcha").val();
        var departman =$("#mail-departman").val();
        var submit =$("#mail-submit").val();
        $(".form-message").load("heads/contact.php",{
            name: name,
            email: email,
            subject: subject,
            message: message,
            captcha: captcha,
            departman: departman,
            submit: submit
        },function(){
            $('#load-image').hide();
            });
    });
});

  

这是我的回调函数：

$("#mail-name, #mail-email, #mail-subject, #mail-message, #mail-departman, #mail-captcha").removeClass("input-error");
var errorEmpty = "<?php echo $errorEmpty;?>";
var errorEmail = "<?php echo $errorEmail;?>";
if(errorEmpty == true){
    $("#mail-name, #mail-email, #mail-subject, #mail-message, #mail-departman, #mail-captcha").addClass("input-error");
}
if(errorEmail == true){
    $("#mail-name, #mail-email, #mail-subject, #mail-message, #mail-departman, #mail-captcha").addClass("input-error");
}
if(errorEmpty == false && errorEmail == false){
    $("#mail-name, #mail-email, #mail-subject, #mail-message, #mail-departman, #mail-captcha").val("");
}

加载图像CSS：

.load-image{
  border: 16px solid #f3f3f3; /* Light grey */
  border-top: 16px solid #3498db; /* Blue */
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

Answer 1

您的想法是正确的，您需要在请求开始时显示加载图像，并在请求完成时再次隐藏它。但是，要执行此操作，请使用表单上现有的submit事件处理程序以显示图像。您也可以在此处禁用该按钮以停止多次点击。

然后，您可以使用load()的回调来隐藏图像，并在请求完成后再次重新启用该按钮。试试这个：

$(document).ready(function() {
  $("form").submit(function(e) {
    e.preventDefault();

    var $loadImage = $('#load-image').show(); // show loading image
    var $mailSubmit = $('#mail-submit').prop('disabled', true); // disable the submit button

    $(".form-message").load("heads/contact.php", {
      name: $("#mail-name").val(),
      email: $("#mail-email").val(),
      subject: $("#mail-subject").val(),
      message: $("#mail-message").val(),
      captcha: $("#mail-captcha").val(),
      departman: $("#mail-departman").val(),
      submit: $("#mail-submit").val()
    }, function() {
      $loadImage .hide(); // hide loading image
      $mailSubmit.prop('disabled', false); // enable the submit button
    });
  });
});

Answer 2

首先隐藏通过CSS或jQuery加载的图片，然后在表单提交时触发它以显示，并在ajax完成后再次将其隐藏

$(document).ready(function(){
	$('#load-image').hide()
    $("form").submit(function(event){
        event.preventDefault();
		$('#load-image').show();
        var name =$("#mail-name").val();
        var email =$("#mail-email").val();
        var subject =$("#mail-subject").val();
        var message =$("#mail-message").val();
        var captcha =$("#mail-captcha").val();
        var departman =$("#mail-departman").val();
        var submit =$("#mail-submit").val();
        $(".form-message").load("heads/contact.php",{
            name: name,
            email: email,
            subject: subject,
            message: message,
            captcha: captcha,
            departman: departman,
            submit: submit
        },function(){
			$('#load-image').hide();
			});
    });
});

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

 
<form action="heads/contact.php" method="post">
    <input type="text" id="mail-name" name="name" placeholder="Name...">
    	  <br />
    	<img id="load-image" src="http://www.dabur.com/daburhonitus/images/preloader.gif" width="31" height="31" alt="Loading image" />
    	<br />
    	<p class="form-message"></p>
    	<button id="mail-submit" type="submit" name="submit">Submit</button>
    </form>