Question

我试图创建一个＆＃34;加载效果＆＃34;使用JQuery和简单的GIF图像。当用户从复选框或下拉菜单中选中一个选项时，它会显示GIF图像然后消失。

问题是结果与GIF同时显示，我想在GIF消失时显示它。我做错了什么，但我还没有找到必须添加代码的线索。

网址：http://bdebeauty.es/index.php?option=com_jumi&view=application&fileid=14&Itemid=258

JQuery脚本：

<script>

  function makeTable(data){
   var tbl_body = "";
      $.each(data, function() {
        var tbl_row = "";
        $.each(this, function(k,v)
        {
            tbl_row += "<td>"+v+"</td>";
        })
        tbl_body += "<tr>"+tbl_row+"</tr>";         
      })

    return tbl_body;
  }

  function getEmployeeFilterOptions(){
    var opts = [];
    $checkboxes.each(function(){
      if(this.checked){
        opts.push(this.name);
      }
    });

    return opts;
  }

  function updateEmployees(opts){
    $.ajax({
      type: "POST",
      url: "submit.php",
      dataType : 'json',
      cache: false,
      data: {filterOpts: opts},
      success: function(records){

        $('#employees tbody').html(makeTable(records));
      // here, after the content is inside DOM/visible we activate the plugin
      }
    });
  }

  $(document).ajaxStart(function(){
        $('#loading').fadeIn("slow");
    }).ajaxStop(function(){
        $('#loading').fadeOut("slow");
    });

  $( document ).ready(function() {
    updateEmployees();
   });

</script>

提前致谢。

Answer 1

相反，我会以这种方式加载：

function updateEmployees(opts) {
    var resp; // declare a var to hold the response
    $.ajax({
        type: "POST",
        url: "submit.php",
        dataType: 'json',
        beforeSend:function(){
           $('#loading').fadeIn("slow"); // before send show loading
        },
        cache: false,
        data: {filterOpts: opts},
        success: function (records) {
            resp = records; // assign the records to resp
        },
        complete:function(){
           $('#loading').fadeOut("slow", function(){ // use  the callback
               $('#employees tbody').html(makeTable(resp));
           });
        }
    });
}

JQuery加载效果（删除并显示结果）

1 个答案: