如何在
每次以 MVC Asp.net 提交页面时加载图像或文本?所以,基本上我不想在每个页面中重复代码,我想在提交表单(无论进入应用程序的哪个位置(时显示图像或文本,和/或让用户加载页面的更好方法。
这是 _layout.cshtml 中的代码
<div class="spinner" style="display:none">
<div class="center-div">
<div class="inner-div">
<div class="loader"></div>
</div>
</div>
</div>
@RenderBody()
这是我编写的用于捕获所有提交按钮的 JavaScript:
<script>
$(document).ready(function () {
$(document.querySelectorAll("button[type=button]")).click(function () {
$('.spinner').css('display', 'block');
});
});
</script>
最后是一个简单的 CSS:
<style>
.center-div {
width: 300px;
height: 300px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -150px;
}
.spinner {
position: fixed;
z-index: 999;
height: 100%;
width: 100%;
top: 0;
left: 0;
background-color: Black;
filter: alpha(opacity=60);
opacity: 0.6;
-moz-opacity: 0.8;
}
.loader {
margin: auto;
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #15a0ec;
border-bottom: 16px solid #15a0ec;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
.inner-div {
background-color: white;
border-radius: 15px;
margin: auto;
padding: 2%;
width: 150px;
}
@@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
我试过这个,但它根本不起作用。
提前谢谢。
如果是 Ajax 表单,请提交:
$(document).ajaxSend(function (event, xhr, options) {
$('.spinner').css('display', 'block');
}).ajaxComplete(function (event, xhr, options) {
$('.spinner').css('display', 'none');
}).ajaxError(function (event, jqxhr, settings, exception) {
$('.spinner').css('display', 'none');
});
这将处理所有 Ajax 调用中的加载程序。
如果您想在页面完全加载之前显示加载器,那么:
首先,从微调器div 中删除"display:none">
<div class="spinner">
<div class="center-div">
<div class="inner-div">
<div class="loader"></div>
</div>
</div>
</div>
然后在 JS 中:
<script>
$(window).on('load', function () {
$('.spinner').css('display', 'none');
});
</script>