Ajax请求前显示的等待图标

本文介绍如何通过结合Ajax请求与BlockUI插件来实现在页面进行数据加载时的显示效果。具体步骤包括引入必要的JavaScript文件,在Ajax请求前后分别调用BlockUI的开始与结束方法,并在body部分预设加载提示的样式。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1, 引入相应的js  

2, 在相应的ajax前填写下面的代码

    

	$(document).ajaxStart(function(){  
        $.blockUI({  
               message: $('#loading'),  
               css: {  
                   top:  ($(window).height() - 400) /2 + 'px',  
                   left: ($(window).width() - 400) /2 + 'px',  
                   width: '400px',  
                   border: 'none'  
               },  
           overlayCSS: { backgroundColor: '#fff' }   
           });  
   }).ajaxStop($.unblockUI); 

3, 在body中添加下面代码

   

<div style="display: none" id="loading"><img src="${basePath}/dataSelect/js-css-img/img/wait.gif" alt="loading"/></div> 
选择自己喜欢的等待图片放到相应位置

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值