Question

目前我正在使用以下代码来显示结果。当结果包含来自mysql的许多记录时（例如，5000个成员或更多n以下示例），加载数据需要一些时间。我希望在此过程中显示加载图像（path / images / loading.gif），直到显示完整数据。

代码如下：

 <select id="lifemember" name="lifemember">
                <option value="">Select Your Option</option>
               <option value="10">Last 10 Members</option>
               <option value="50">Last 50 Members</option>
               <option value="100">Last 100 Members</option>
               <option value="250">Last 250 Members</option>
               <option value="500">Last 500 Members</option>
               <option value="1000">Last 1000 Members</option>
               <option value="5000">Last 5000 Members</option>
               <option value="all">Show All Life Members List</option>
                </select>
               <div id='loader1' width="40px" align="left" style="width:40px; display:inline; float:left;"><img src="mysite.com/images/loading1.gif" /></div> <br>

ajax代码如下：

 <script>
  $('[name="lifemember"]').on('change', function() {

    var ajaxMethod = "default.php";

    switch($(this).val())

     {

      case "10":
        ajaxMethod = "members10.php";
      break;
      case "50":
        ajaxMethod = "members50.php";
      break;                
      case "100":
        ajaxMethod = "members100.php";
      break;        
      case "250":
        ajaxMethod = "members250.php";
      break;                 
      case "500":
        ajaxMethod = "members500.php";
      break;  
      case "1000":
        ajaxMethod = "members1000.php";
      break;   
      case "5000":
        ajaxMethod = "members5000.php";
      break;   
      case "all":
        ajaxMethod = "membersall.php";
      break;       
    }

         $("#results").load(ajaxMethod);

     });
   </script>

结果显示在以下分部

中

<div id="results">LIFE MEMBERS LIST Will Be Shown Here After Selecting Your Option From Above Combobox...</div>

我想在组合框旁边显示加载图片（path / images / loading.gif）。

Answer 1

只需在load()方法之前显示加载程序，并在加载数据时隐藏它：

$('[name="lifemember"]').on('change', function() {
    var ajaxMethod = "default.php";
    // ...
    $('#loader1 img').show();
    $("#results").load(ajaxMethod, function(){
        // on complete, hide the loader
        $('#loader1 img').hide();
    });
});

在ajaxmethod期间加载图像

1 个答案: