js呼叫打印时出现loading加载效果
时间: 2023-09-16 16:06:36 浏览: 52
您可以使用jQuery中的$.ajax()函数来实现这一点。首先,您需要设置 beforeSend 参数来在发出请求之前显示加载效果,如下所示:
```
$.ajax({
url: 'example.php',
beforeSend: function() {
// 显示加载效果
},
success: function(data) {
// 请求成功后执行的代码
},
error: function() {
// 请求失败后执行的代码
}
});
```
在 beforeSend 参数中,您可以使用 JavaScript 或 CSS 来显示加载效果,例如添加一个 loading 类来实现:
```
$.ajax({
url: 'example.php',
beforeSend: function() {
$('body').addClass('loading');
},
success: function(data) {
// 请求成功后执行的代码
$('body').removeClass('loading');
},
error: function() {
// 请求失败后执行的代码
$('body').removeClass('loading');
}
});
```
然后,您可以在 CSS 文件中添加以下代码来定义加载效果:
```
.loading::before {
content: "";
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.8);
z-index: 9999;
background-image: url(loading.gif);
background-repeat: no-repeat;
background-position: center;
}
```
其中,loading.gif是您的加载动画图片。通过这种方式,当您发起 ajax 请求时,页面就会显示一个 loading 效果,直到请求完成后才消失。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)