使用加载图片解决在Ajax数据加载中页面出现短暂空白的问题(推荐)
2016-12-12 10:47
856 查看
在项目中用ajax异步获取数据后有时会因为数据问题或者网络问题,页面一直显示空白,现在用加载图片来过渡这种状态:
<script> $(function(){ $.ajax({ url:'',//提供接口的文件地址链接 dataType:'json', type:'POST', beforeSend: function(){ $('#loading').html("<img src=\"images/loading.gif\" width=\"15%\" style=\"text-align:center;margin:0 auto;\"><p style=\"color:#999;font-size:14px\">加载中,请稍后……</p>") //数据发送过程中先加载图片 }, error: function(msg){ //数据读取失败显示 zNodes=data.responseJson; alert("对不起,数据获取失败,请联系管理员"); }, success:function(msg){ //数据读取成功并显示数据列表 $('#loading').fadeOut(1000); //图片显示时间; var ul = ""; for(var i= 0;i<msg.legth;i++){ //数据列表行数 ul += "<li class='list'><a href='php/phpArticle.php?art="+msg[i]['id']+" 'class='widget-list-link'>" + msg[i]['title']+"<i class='more-mark'>"+">>"+"</i></a></li>"; } $("#list").html(ul); }, error:function(){ //失败时显示 console.log("链接错误") ; } }); }); </script>
数据在加载状态显示
以上所述是小编给大家介绍的用加载图片解决在Ajax数据加载中页面出现短暂空白的问题(推荐),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
您可能感兴趣的文章:
相关文章推荐
- 用加载图片解决在ajax数据加载中页面出现短暂空白的问题
- 使用easyUI的treegrid的时候,出现后台返回数据为空时,treegrid加载了前面请求到的数据到页面上的问题
- 解决H5页面浏览器返回或前进时ajax不能重新加载数据的问题
- jQuery UI Autocomplete 使用 ajax 方法传输Json数据出现乱码问题的解决
- 解决Vue使用mint-ui loadmore实现上拉加载与下拉刷新出现一个页面使用多个上拉加载后冲突问题
- vue 在nginx下页面刷新出现404问题解决和在nginx下页面加载了js但是页面显示空白问题解决
- 在进行页面的DIV CSS排版时,遇到IE6(当然有时Firefox下也会偶遇)浏览器中的图片元素img下出现多余空白的问题绝对是常见的对于该问题的解决方法也是“见机行事”。
- 解决使用Validform插件,datatype里用ajax验证数据是否已经存在时出现的问题
- AJAX第五步:使用ajax解决页面首页显示后台数据的问题
- 解决RecyclerView中使用UIL加载网络图片,在刷新时出现闪烁问题
- 注册登录过程点滴(三):解决MVC3中使用Ajax.BeginForm会重复提交数据的问题 推荐
- Windows Phone 用WebBrowser加载本地图片以及解决加载html页面出现乱码问题
- 使用WebView加载数据出现找不到网页的问题之解决办法(转)
- 关于 ie 下使用 iframe 加载子页面时,子页面ajax数据能进入success方法,但是数据为空的问题
- 使用jquery解决页面在加载时出现短暂的布局紊乱
- Android WebView加载出现空白页面问题解决
- birt页面出现数据空白解决办法
- asp中使用FCKeditor存取数据时出现乱码问题解决方法
- ASP.NET AJAX Advance Tips & Tricks (10) 解决使用AJAX Extender时的页面导出(Word/Excel)问题(Extender control 'XXX' is not a registered extender control)
- 解决Firefox无法使用“查看图片”或“查看页面源代码”的问题