jquery中发送请求时，弹出一个加载图片，完成后进行隐藏

对应的js代码

 

//动态创建时间图(date:2012-01-09,author:lwc)
//参数具体见api（highchart）
function getsmsLogpro(paths,proname,objs)
{
     var nows=new Date();
     var options = {
    
           chart: {
               renderTo: 'container'
                  },
             lang:{
                        months: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
                        shortMonths: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一', '十二'],
                        weekdays: ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
                        exportButtonTitle:'导出PDF',
                        printButtonTitle:'打印报表'
                   },   
            title:{
                        text: '短信日志分析图'
                  },
            rangeSelector: {
                        // 缩放选择按钮，是一个数组。
                        // 其中type可以是： 'millisecond', 'second', 'minute', 'day', 'week', 'month', 'ytd' (year to date), 'year' 和 'all'。
                        // 其中count是指多少个单位type。
                        // 其中text是配置显示在按钮上的文字
                        buttons: [
      {type: 'day',
                   count: 3,
                 text: '3d'
                   },
      {
                                type: 'month',
                                count: 1,
                                text: '1月'
                            }, {
                                type: 'month',
                                count: 3,
                                text: '3月'
                            }, {
                                type: 'month',
                                count: 6,
                                text: '6月'
                            }, {
                                type: 'year',
                                count: 1,
                                text: '1年'
                            },{
                                type: 'year',
                                count: 3,
                                text: '3年'
                            }, {
                                type: 'all',
                                text: '所有'
                            }],
                        // 默认选择域：0（缩放按钮中的第一个）、1（缩放按钮中的第二个）……
                        selected: 0
                        // 是否允许input标签选框
                       // inputEnabled: false
                    },
               tooltip:{
                       // 日期时间格式化
                    xDateFormat: '%Y-%m-%d ',
                    backgroundColor: '#FCFFC5',
                    valueSuffix: ' 分钟'
                    
                    
                },      
               xAxis:{
                    tickPixelInterval: 250,
                        // 如果X轴刻度是日期或时间，该配置是格式化日期及时间显示格式
                        dateTimeLabelFormats: {
                            second: '%Y-%m-%d<br/>%H:%M:%S',
                            minute: '%Y-%m-%d<br/>%H:%M',
                            hour: '%Y-%m-%d<br/>%H:%M',
                            day: '%Y<br/>%m-%d',
                            week: '%Y<br/>%m-%d',
                            month: '%Y-%m',
                            year: '%Y'
                        }
                    },
                   yAxis: {
                title: {
                    text: '时间 (分钟)'
                        },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
                  series: []
                  
                  
        };
   
        var series = { data: []  };
       
        $.ajax({
      url:paths+'test/smsLogAnalyJsonAction_sendStock.action',
      data:'proName='+proname,
      dataType: 'json',
       beforeSend:function(XMLHttpRequest)
         {
      
              objs.html("<img src='images/js/loading.gif'/>");
         
         },
          success:function(datas,textStatus)
           {
           
            // alert('开始回调，状态文本值：'+textStatus+' 返回数据：'+datas);
              objs.empty();
              series.name='存储过程:'+datas.entitylist[0].proName;
    
              $.each(datas.entitylist,function(ids,item){
          
             var counttimes=item.timsMinutes;
             series.data.push([Date.UTC(item.sysDate.substring(0,4),item.sysDate.substring(4,6)-1,item.sysDate.substring(6,8)),counttimes]);
   
             
             });
             options.series.push(series);
             var chart = new Highcharts.StockChart(options);                                    
           }
      });
     
       
       
       
       
 
  
  
}

 

 

 

 

 

对应的界面：

 

$(function() {
     $(document).ready(function() {
     var paths='<%=basePath%>';
     var proname=document.getElementById("proName").value;
     var protype=document.getElementById("types").value;
     if(protype==1)
     {
     //频率图形
      getsmsrates(paths,proname)
     }
     else
     {
      //时间图
      // getsmsLogpro(paths,proname);
     
     
      //请求
    
    
      var objs=$("#loading");
   getsmsLogpro(paths,proname,objs);
      
     }
     
     
     
     
     
     
     });

 <div id="loading"></div>

 

 

需要案例发信息我