php - How to load gif image while ajax content is loading and javascript -

this question has answer here:

• loading gif image while jquery ajax running 4 answers
• jquery ajax loading image 4 answers

i have been trying load gif image until ajax load data , show it. feeling comforted it.

i hope can me out there..this code advance search.

now want add loading gif 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 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 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 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 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 , care</h3>');                      }                      content.push('<ul><li><div>');                     content.push('<p>'+obj.section_number +' '+ obj.title+'</p>');                     content.push('</div></li></ul>');                  }//end 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 , care</h3>');                      }                       content.push('<ul><li><div>');                     content.push('<p>'+obj.section_number +' '+ obj.title+'</p>');                     content.push('</div></li></ul>');                  }//end 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 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 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 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 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 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 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 method called beforesend, make use of it!

example:

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