如何在加载ajax内容的同时加载gif图像以及javascript

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

您可以将图像添加到加载页面。当ajax在写入图像并显示ajax输出时自动加载它。

<script> 
    var DisplayIMge = document.getElementById("ajaxdiv"); 
    DisplayIMge.innerHTML = "<img src='cdn/images/ajax-loader.gif' /><h3>Please wait while we load</h3>" 
</script> 

希望这会对你有用！要做到这一点

Answer 2

的方法之一是：

就在$.ajax({ });

写：$("#showImage").html("<img src="url"/>");

在：

$.ajax({ 
    type: 'POST', 
    url: base_rul+'site/advancedsearch', 
    data: { 
     keyValues: keyValues 
    }, 
    dataType: 'json', 
    success: function(data) 
    { 
     //here add $("#showImage").html(""); 
     // your content here 
    } 
}); 

内容加载之前，增加了图像和后成功电话清除该图像。

Answer 3

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

例子：

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

Answer 4

而且可以纠正你的代码（如@icktoofay说的）这样的：

var aTitles = [ 
     'Chapter 18 New Health Care Occupancy', 
     'Chapter 19 Existing Health Care Occupancy', 
     ... 
    ]; 

var outSomeResults = function(content, data, id) { 
     for(var i=0; i < data.length; i++){ 
      var obj = data[i]; 
      if(obj.chapter_row == 0) { 
      content.push('<h3>'+aTitles[id]+'</h3>'); 
      } 

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

.... 
success: function(data) { 

    var content = ['']; 
    if(data.status=='1') { 
     for(var i=0; i<data.item.chapter.length; i++) { 
      if(data.item.chapter[i+1] && data.item.chapter[i+1].length>=1) { 
       outSomeResults(content, data.item.chapter[i+1], i); 
      } 
     } 
    }