如何加载GIF图像，而AJAX加载内容和javascript [英] How to load gif image while ajax content is loading and javascript

查看：109
本文介绍了如何加载GIF图像，而AJAX加载内容和javascript的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我一直在试图加载GIF图像，直到AJAX加载数据并显示它。但我感觉安慰吧。

我希望你能帮助我there..this我的code的高级搜索。

现在我想添加加载GIF这一点。

  $。阿贾克斯（{
    键入：POST，
    网址：base_rul +网站/填写AdvancedSearch'，
    数据： {
        keyValues​​：keyValues
    }，
    数据类型：JSON，
    成功：函数（数据）
    {

        VAR含量= [''];
        如果（data.status =='1'）
        {

            //为（变种K = 1; K＆LT; = 2; k ++）{

          //为第一章开始
          如果（data.item.chapter [1]＆安培;＆安培; data.item.chapter [1] .length＆GT; = 1）{
               对于（i = 0; I＆LT; data.item.chapter [1] .length;我++）{
                  变种物镜= data.item.chapter [1] [I];
                  //alert(data.item.chapter[1][0].chapter_row）;
                    如果（data.item.chapter [1] [i]于.chapter_row == 0）{
                       content.push（'＆LT; H3＆GT;第18章新医入住＆LT; / H3＆GT;'）;
                     }

                    content.push（'＆LT; UL＆GT;＆LT;李＆GT;＆LT; D​​IV＆GT;'）;
                    content.push（'＆其中p为H.;'+ obj.section_number +''+ obj.title +'＆所述; / P＆GT;'）;
                    content.push（'＆LT; / DIV＆GT;＆LT; /李＆GT;＆LT; / UL＆GT;'）;

                } //结束for each循环
            如果} //结束
            //为第一章结束

         //为第二章开始
          如果（data.item.chapter [2]＆安培;＆安培; data.item.chapter [2] .length＆GT; = 1）{
               对于（i = 0; I＆LT; data.item.chapter [2] .length;我++）{
                  变种物镜= data.item.chapter [2] [I];
                  //alert(data.item.chapter[1][0].chapter_row）;
                    如果（data.item.chapter [2] [i]于.chapter_row == 0）{
                       content.push（'＆LT; H3＆GT;第19章现有的医疗入住＆LT; / H3＆GT;'）;
                     }

                    content.push（'＆LT; UL＆GT;＆LT;李＆GT;＆LT; D​​IV＆GT;'）;
                    content.push（'＆其中p为H.;'+ obj.section_number +''+ obj.title +'＆所述; / P＆GT;'）;
                    content.push（'＆LT; / DIV＆GT;＆LT; /李＆GT;＆LT; / UL＆GT;'）;

                } //结束for each循环
            如果} //结束
            //为第二章结束

            //为第三章开始
            如果（data.item.chapter [3]＆安培;＆安培; data.item.chapter [3] .length＆GT; = 1）{
                对于（i = 0; I＆LT; data.item.chapter [3] .length;我++）{
                    变种物镜= data.item.chapter [3] [i]于;

                    如果（data.item.chapter [3] [i]于.chapter_row == 0）{
                       content.push（'＆LT; H3＆GT;第20章新门诊医疗保健入住＆LT; / H3＆GT;'）;
                     }

                    content.push（'＆LT; UL＆GT;＆LT;李＆GT;＆LT; D​​IV＆GT;'）;
                    content.push（'＆其中p为H.;'+ obj.section_number +''+ obj.title +'＆所述; / P＆GT;'）;
                    content.push（'＆LT; / DIV＆GT;＆LT; /李＆GT;＆LT; / UL＆GT;'）;

                } //结束for each循环
            如果} //结束
            //为第三章结束

            //为第四​​章开始
            如果（data.item.chapter [4]＆安培;＆安培; data.item.chapter [4] .length＆GT; = 1）{
                对于（i = 0; I＆LT; data.item.chapter [4] .length;我++）{
                    变种物镜= data.item.chapter [4] [I];

                    如果（data.item.chapter [4] [I] .chapter_row == 0）{
                       content.push（'＆LT; H3＆GT;第21章现有的门诊医疗保健入住＆LT; / H3＆GT;'）;
                     }

                    content.push（'＆LT; UL＆GT;＆LT;李＆GT;＆LT; D​​IV＆GT;'）;
                    content.push（'＆其中p为H.;'+ obj.section_number +''+ obj.title +'＆所述; / P＆GT;'）;
                    content.push（'＆LT; / DIV＆GT;＆LT; /李＆GT;＆LT; / UL＆GT;'）;

                } //结束for each循环
            如果} //结束
            //为第四​​章结束

            //为第5章开始
            如果（data.item.chapter [5]＆安培;＆安培; data.item.chapter [5] .length＆GT; = 1）{
                对于（i = 0; I＆LT; data.item.chapter [5] .length;我++）{
                    变种物镜= data.item.chapter [5] [I];

                    如果（data.item.chapter [5] [I] .chapter_row == 0）{
                       content.push（'＆LT; H3＆GT;第32章新建住宅局和护理及LT; / H3＆GT;'）;
                     }

                    content.push（'＆LT; UL＆GT;＆LT;李＆GT;＆LT; D​​IV＆GT;'）;
                    content.push（'＆其中p为H.;'+ obj.section_number +''+ obj.title +'＆所述; / P＆GT;'）;
                    content.push（'＆LT; / DIV＆GT;＆LT; /李＆GT;＆LT; / UL＆GT;'）;

                } //结束for each循环
            如果} //结束
            //为第5章结束

            //为第6章开始
            如果（data.item.chapter [6]＆安培;＆安培; data.item.chapter [6] .length＆GT; = 1）{
                对于（i = 0; I＆LT; data.item.chapter [6] .length;我++）{
                    变种物镜= data.item.chapter [6] [I];

                    如果（data.item.chapter [6] [I] .chapter_row == 0）{
                       content.push（'＆LT; H3＆GT;第33章既有居住董事会和护理及LT; / H3＆GT;'）;
                     }


                    content.push（'＆LT; UL＆GT;＆LT;李＆GT;＆LT; D​​IV＆GT;'）;
                    content.push（'＆其中p为H.;'+ obj.section_number +''+ obj.title +'＆所述; / P＆GT;'）;
                    content.push（'＆LT; / DIV＆GT;＆LT; /李＆GT;＆LT; / UL＆GT;'）;

                } //结束for each循环
            如果} //结束
            //为第6章结束

            //为第7章启动
            如果（data.item.chapter [7]＆安培;＆安培; data.item.chapter [7] .length＆GT; = 1）{
                对于（i = 0; I＆LT; data.item.chapter [7] .length;我++）{
                    变种物镜= data.item.chapter [7] [I];

                    如果（data.item.chapter [7] [I] .chapter_row == 0）{
                       content.push（'＆LT; H3＆GT;第18章新的医疗用房＆LT; / H3＆GT;'）;
                     }

                    content.push（'＆LT; UL＆GT;＆LT;李＆GT;＆LT; D​​IV＆GT;'）;
                    content.push（'＆其中p为H.;'+ obj.section_number +''+ obj.title +'＆所述; / P＆GT;'）;
                    content.push（'＆LT; / DIV＆GT;＆LT; /李＆GT;＆LT; / UL＆GT;'）;

                } //结束for each循环
            如果} //结束
            //为第7章结束

            //为第八章开始
            如果（data.item.chapter [8]＆安培;＆安培; data.item.chapter [8] .length＆GT; = 1）{
                对于（i = 0; I＆LT; data.item.chapter [8] .length;我++）{
                    变种物镜= data.item.chapter [8] [I];

                    如果（data.item.chapter [8] [I] .chapter_row == 0）{
                       content.push（'＆LT; H3＆GT;第19章现有的医疗用房＆LT; / H3＆GT;'）;
                     }
                    content.push（'＆LT; UL＆GT;＆LT;李＆GT;＆LT; D​​IV＆GT;'）;
                    content.push（'＆其中p为H.;'+ obj.section_number +''+ obj.title +'＆所述; / P＆GT;'）;
                    content.push（'＆LT; / DIV＆GT;＆LT; /李＆GT;＆LT; / UL＆GT;'）;

                } //结束for each循环
            如果} //结束
            //为第八章结束

            //为第9章开始
            如果（data.item.chapter [9]＆安培;＆安培; data.item.chapter [9] .length＆GT; = 1）{
                对于（i = 0; I＆LT; data.item.chapter [9] .length;我++）{
                    变种物镜= data.item.chapter [9] [I];

                    如果（data.item.chapter [9] [I] .chapter_row == 0）{
                       content.push（'＆LT; H3＆GT;第20章新Amulatory医疗用房＆LT; / H3＆GT;'）;
                     }

                    content.push（'＆LT; UL＆GT;＆LT;李＆GT;＆LT; D​​IV＆GT;'）;
                    content.push（'＆其中p为H.;'+ obj.section_number +''+ obj.title +'＆所述; / P＆GT;'）;
                    content.push（'＆LT; / DIV＆GT;＆LT; /李＆GT;＆LT; / UL＆GT;'）;

                } //结束for each循环
            如果} //结束
            //为第9章结束

            //为第10章启动
            如果（data.item.chapter [10]＆安培;＆安培; data.item.chapter [10] .length＆GT; = 1）{
                对于（i = 0; I＆LT; data.item.chapter [10] .length;我++）{
                    变种物镜= data.item.chapter [10] [Ⅰ];

                    如果（data.item.chapter [10] [Ⅰ] .chapter_row == 0）{
                       content.push（'＆LT; H3＆GT;第21章现有Amulatory医疗用房＆LT; / H3＆GT;'）;
                     }

                    content.push（'＆LT; UL＆GT;＆LT;李＆GT;＆LT; D​​IV＆GT;'）;
                    content.push（'＆其中p为H.;'+ obj.section_number +''+ obj.title +'＆所述; / P＆GT;'）;
                    content.push（'＆LT; / DIV＆GT;＆LT; /李＆GT;＆LT; / UL＆GT;'）;

                } //结束for each循环
            如果} //结束
            //为第10章结束

            //为第十一章开始
            如果（data.item.chapter [11]＆安培;＆安培; data.item.chapter [11] .length＆GT; = 1）{
                对于（i = 0; I＆LT; data.item.chapter [11] .length;我++）{
                    变种物镜= data.item.chapter [11] [Ⅰ];

                    如果（data.item.chapter [11] [Ⅰ] .chapter_row == 0）{
                       content.push（'＆LT; H3＆GT;第32章新建住宅板＆LT; / H3＆GT;'）;
                     }

                    content.push（'＆LT; UL＆GT;＆LT;李＆GT;＆LT; D​​IV＆GT;'）;
                    content.push（'＆其中p为H.;'+ obj.section_number +''+ obj.title +'＆所述; / P＆GT;'）;
                    content.push（'＆LT; / DIV＆GT;＆LT; /李＆GT;＆LT; / UL＆GT;'）;

                } //结束for each循环
            如果} //结束
            //为第十一章结束

            //为第12章启动
            如果（data.item.chapter [12]＆安培;＆安培; data.item.chapter [12] .length＆GT; = 1）{
                对于（i = 0; I＆LT; data.item.chapter [12] .length;我++）{
                    变种物镜= data.item.chapter [12] [Ⅰ];

                    如果（data.item.chapter [12] [Ⅰ] .chapter_row == 0）{
                       content.push（'＆LT; H3＆GT;第33章既有居住板＆LT; / H3＆GT;'）;
                     }

                    content.push（'＆LT; UL＆GT;＆LT;李＆GT;＆LT; D​​IV＆GT;'）;
                    content.push（'＆其中p为H.;'+ obj.section_number +''+ obj.title +'＆所述; / P＆GT;'）;
                    content.push（'＆LT; / DIV＆GT;＆LT; /李＆GT;＆LT; / UL＆GT;'）;

                } //结束for each循环
            如果} //结束
            //为第12章结束

            //} //结束ķ循环

        } //如果条件结束
        其他
        {
            content.push（'＆LT; UL＆GT;＆LT;李＆GT;＆LT; D​​IV＆GT;'）;

            content.push（'＆LT; P＆GT;没有找到记录＆LT; / P＆GT;'）;

            content.push（'＆LT; / DIV＆GT;＆LT; /李＆GT;＆LT; / UL＆GT;'）;
        }
        $（'＃advanced_search_display）HTML（content.join（''））;
      $（'＃过滤器）的CSS（显示，无）;
      $（'＃active_filters）的CSS（显示，无）;
    }

}）;


} //函数结束

解决方案

jQuery的AJAX有一个名为beforeSend方法，利用它！

例如：

  $。阿贾克斯（{
    网址：someurl.php，
    数据：数据，
    beforeSend：函数（）{$（'＃image_id）显示（）; }，
    成功：函数（）{
        $（'＃image_id）隐藏（）。
        // ...
    }
}）;

I have been trying to load gif image until ajax load the data and show it. but i am feeling comforted to it.

I hope you can help me out there..this is my code for advance search.

Now i want to add loading gif for this.

$.ajax({
    type: 'POST',
    url: base_rul+'site/advancedsearch',
    data: {
        keyValues: keyValues
    },
    dataType: 'json',
    success: function(data) 
    {

        var content = ['']; 
        if(data.status=='1')
        {

            //for(var k=1;k<=2;k++){

          //for chapter1 starts
          if( data.item.chapter[1] && data.item.chapter[1].length>=1){
               for(i=0;i<data.item.chapter[1].length;i++){
                  var obj = data.item.chapter[1][i];
                  //alert(data.item.chapter[1][0].chapter_row);
                    if(data.item.chapter[1][i].chapter_row==0){
                       content.push('<h3>Chapter 18 New Health Care Occupancy</h3>');
                     }

                    content.push('<ul><li><div>');
                    content.push('<p>'+obj.section_number +' '+ obj.title+'</p>');
                    content.push('</div></li></ul>');

                }//end for each loop
            }//end if
            //for chapter1 ends

         //for chapter2 starts
          if( data.item.chapter[2] && data.item.chapter[2].length>=1){
               for(i=0;i<data.item.chapter[2].length;i++){
                  var obj = data.item.chapter[2][i];
                  //alert(data.item.chapter[1][0].chapter_row);
                    if(data.item.chapter[2][i].chapter_row==0){
                       content.push('<h3>Chapter 19 Existing Health Care Occupancy</h3>');
                     }

                    content.push('<ul><li><div>');
                    content.push('<p>'+obj.section_number +' '+ obj.title+'</p>');
                    content.push('</div></li></ul>');

                }//end for each loop
            }//end if
            //for chapter2 ends

            //for chapter3 starts
            if( data.item.chapter[3] && data.item.chapter[3].length>=1){
                for(i=0;i<data.item.chapter[3].length;i++){
                    var obj = data.item.chapter[3][i];

                    if(data.item.chapter[3][i].chapter_row==0){
                       content.push('<h3>Chapter 20 New Ambulatory Health Care Occupancy</h3>');
                     }

                    content.push('<ul><li><div>');
                    content.push('<p>'+obj.section_number +' '+ obj.title+'</p>');
                    content.push('</div></li></ul>');

                }//end for each loop
            }//end if
            //for chapter3 ends

            //for chapter4 starts
            if( data.item.chapter[4] && data.item.chapter[4].length>=1){
                for(i=0;i<data.item.chapter[4].length;i++){
                    var obj = data.item.chapter[4][i];

                    if(data.item.chapter[4][i].chapter_row==0){
                       content.push('<h3>Chapter 21 Existing Ambulatory Health Care Occupancy</h3>');
                     }

                    content.push('<ul><li><div>');
                    content.push('<p>'+obj.section_number +' '+ obj.title+'</p>');
                    content.push('</div></li></ul>');

                }//end for each loop
            }//end if
            //for chapter4 ends

            //for chapter5 starts
            if( data.item.chapter[5] && data.item.chapter[5].length>=1){
                for(i=0;i<data.item.chapter[5].length;i++){
                    var obj = data.item.chapter[5][i];

                    if(data.item.chapter[5][i].chapter_row==0){
                       content.push('<h3>Chapter 32 New Residential Board and Care</h3>');
                     }

                    content.push('<ul><li><div>');
                    content.push('<p>'+obj.section_number +' '+ obj.title+'</p>');
                    content.push('</div></li></ul>');

                }//end for each loop
            }//end if
            //for chapter5 ends

            //for chapter6 starts
            if( data.item.chapter[6] && data.item.chapter[6].length>=1){
                for(i=0;i<data.item.chapter[6].length;i++){
                    var obj = data.item.chapter[6][i];

                    if(data.item.chapter[6][i].chapter_row==0){
                       content.push('<h3>Chapter 33 Existing Residential Board and Care</h3>');
                     }


                    content.push('<ul><li><div>');
                    content.push('<p>'+obj.section_number +' '+ obj.title+'</p>');
                    content.push('</div></li></ul>');

                }//end for each loop
            }//end if
            //for chapter6 ends

            //for chapter7 starts
            if( data.item.chapter[7] && data.item.chapter[7].length>=1){
                for(i=0;i<data.item.chapter[7].length;i++){
                    var obj = data.item.chapter[7][i];

                    if(data.item.chapter[7][i].chapter_row==0){
                       content.push('<h3>Chapter 18 New Health Care Occupancies</h3>');
                     }

                    content.push('<ul><li><div>');
                    content.push('<p>'+obj.section_number +' '+ obj.title+'</p>');
                    content.push('</div></li></ul>');

                }//end for each loop
            }//end if
            //for chapter7 ends

            //for chapter8 starts
            if( data.item.chapter[8] && data.item.chapter[8].length>=1){
                for(i=0;i<data.item.chapter[8].length;i++){
                    var obj = data.item.chapter[8][i];

                    if(data.item.chapter[8][i].chapter_row==0){
                       content.push('<h3>Chapter 19 Existing Health Care Occupancies</h3>');
                     }
                    content.push('<ul><li><div>');
                    content.push('<p>'+obj.section_number +' '+ obj.title+'</p>');
                    content.push('</div></li></ul>');

                }//end for each loop
            }//end if
            //for chapter8 ends

            //for chapter9 starts
            if( data.item.chapter[9] && data.item.chapter[9].length>=1){
                for(i=0;i<data.item.chapter[9].length;i++){
                    var obj = data.item.chapter[9][i];

                    if(data.item.chapter[9][i].chapter_row==0){
                       content.push('<h3>Chapter 20 New Amulatory Health Care Occupancies</h3>');
                     }

                    content.push('<ul><li><div>');
                    content.push('<p>'+obj.section_number +' '+ obj.title+'</p>');
                    content.push('</div></li></ul>');

                }//end for each loop
            }//end if
            //for chapter9 ends

            //for chapter10 starts
            if( data.item.chapter[10] && data.item.chapter[10].length>=1){
                for(i=0;i<data.item.chapter[10].length;i++){
                    var obj = data.item.chapter[10][i];

                    if(data.item.chapter[10][i].chapter_row==0){
                       content.push('<h3>Chapter 21 Existing Amulatory Health Care Occupancies</h3>');
                     }

                    content.push('<ul><li><div>');
                    content.push('<p>'+obj.section_number +' '+ obj.title+'</p>');
                    content.push('</div></li></ul>');

                }//end for each loop
            }//end if
            //for chapter10 ends

            //for chapter11 starts
            if( data.item.chapter[11] && data.item.chapter[11].length>=1){
                for(i=0;i<data.item.chapter[11].length;i++){
                    var obj = data.item.chapter[11][i];

                    if(data.item.chapter[11][i].chapter_row==0){
                       content.push('<h3>Chapter 32 New Residential board</h3>');
                     }

                    content.push('<ul><li><div>');
                    content.push('<p>'+obj.section_number +' '+ obj.title+'</p>');
                    content.push('</div></li></ul>');

                }//end for each loop
            }//end if
            //for chapter11 ends

            //for chapter12 starts
            if( data.item.chapter[12] && data.item.chapter[12].length>=1){
                for(i=0;i<data.item.chapter[12].length;i++){
                    var obj = data.item.chapter[12][i];

                    if(data.item.chapter[12][i].chapter_row==0){
                       content.push('<h3>Chapter 33 Existing Residential board</h3>');
                     }

                    content.push('<ul><li><div>');
                    content.push('<p>'+obj.section_number +' '+ obj.title+'</p>');
                    content.push('</div></li></ul>');

                }//end for each loop
            }//end if
            //for chapter12 ends

            //}//end k loop

        }//if condition ends
        else
        {
            content.push('<ul><li><div>');

            content.push('<p>No records found.</p>');

            content.push('</div></li></ul>');
        }
        $('#advanced_search_display').html(content.join(''));
      $('#filter').css("display","none")  ;
      $('#active_filters').css("display","none");  
    }

}); 


}//end function

解决方案

jQuery's ajax has a method called beforeSend, make use of it!

Example:

$.ajax({
    url: someurl.php,
    data: data,
    beforeSend: function() { $('#image_id').show(); },
    success: function() {
        $('#image_id').hide();
        // ...
    }
});

这篇关于如何加载GIF图像，而AJAX加载内容和javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
PHP最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆