如何在ajax内容加载和javascript时加载gif图像

Question

我一直在尝试加载gif图像,直到ajax加载数据并显示它.但我感到很欣慰.

我希望你能帮帮我..这是我的高级搜索代码.

现在我想为此添加加载gif.

$.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 

Answer 1

jQuery的ajax有一个名为beforeSend的方法,可以利用它!

例:

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