Question

我有输入和选择的页面。这是我的加载动画正在处理页面加载，但我想在按钮点击时设置它，并使其仅在输入填充时工作。我需要它，因为用户应该确认规则，检查书面信息，并在提交时发送邮件，这需要3-15秒。我需要用加载gif填充这个暂停

＆＃13;

$(window).load(function() {
		// Animate loader off screen
		$(".se-pre-con").fadeOut("slow");;
	});

＆＃13;

.no-js #loader { display: none;  }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
.se-pre-con {
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 9999;
	background: url(path-to-gif) center no-repeat #fff;
}

＆＃13;

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.2/modernizr.js"></script>

<div class="se-pre-con"></div>

＆＃13;

Answer 1

尝试使用这种方式：

演示：https://jsfiddle.net/ok6byo68/1/

$('#formz').submit(function(event) {
		$('#load').show();
    var valid = true;
    $(this).find('input').each(function() {
    	if(!$(this).val()){
      	valid = false;
      }
    })
    if(!valid) {
      	event.preventDefault();
        console.log('All fields are required!');
        setTimeout(function(){
					$('#load').hide();
        },1000);
        return;
    }
});

#load{
    width:100%;
    height:100%;
    position:fixed;
    z-index:9999;
    background: url("https://www.creditmutuel.fr/cmne/fr/banques/webservices/nswr/images/loading.gif") no-repeat center center rgba(0,0,0,0.25)
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<form action="" method="POST" enctype="multipart/form-data" name="formz" id="formz" >

<input type="text"  name="first" >

<input type="text"   name="second" >

<input type="text" name="third"   >

<button type="submit" id="button" class = 'button' >Done</button>

</form>
<div id="load" style="display:none;"></div>

Answer 2

希望以下内容对您有所帮助。

$(document).ready(function (e) {
    e.preventDefault();
$('#buttonID').click(function(){
$.ajax({
    beforeSend : function(xhr, opts){
        //show loading gif
        $('#load').show(); 
    },
    success: function(){
         //hide loading gif
                $('#load').hide(); 
    }
});

}

}）;

Answer 3

我通过Jquery解决了我的问题。有更简单的方法。以下是检查输入验证的方法取决于您的输入要求和成功节目动画：

jQuery.validator.setDefaults({
  debug: true,
  success: "valid"
});


$('#My-Button').on('click', function() {
  if ($("#My-Form").valid()) {
    $("#My-Form")[0].submit();
    $('#My-Animation').show();
  }

});

如果输入已填充，请使用加载动画onlick

3 个答案: