• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    使用加载图片解决在Ajax数据加载中页面出现短暂空白的问题(推荐)

    在项目中用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;imsg.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异步加载图片实例分析
    • JQuery实现Ajax加载图片的方法
    • jQuery 瀑布流 绝对定位布局(二)(延迟AJAX加载图片)
    • jQuery 瀑布流 浮动布局(一)(延迟AJAX加载图片)
    • 代码实例ajax实现点击加载更多数据图片
    上一篇:ajax快速解决参数过长无法提交成功的问题
    下一篇:Ajax提交Form表单页面仍会刷新问题的快速解决办法
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    使用加载图片解决在Ajax数据加载中页面出现短暂空白的问题(推荐) 使用,加载,图片,解决,在,