在jquery中显示加载器/微调器时，GIF图片不会动画

我只想问一下我的问题。我在jquery中创建了一个函数，在搜索后在我的页面中显示一个加载器。但我的问题是图像不动画。在jquery中显示加载器/微调器时，GIF图片不会动画

这是我的代码。我使用Codeigniter和jQuery作为我的框架。

$('#search-btn').on('click',function(){ 

      var query = $("#keyword").val(); 

      var image = "<?php echo base_url()."/resources/loading/loading43.gif"; ?>"; 

      $('#loading').html("<img src='"+image+"' class='loeader' align='center' />"); 

      var query_url = "<?php echo site_url('item_controller/searchItem'); ?>"; 

      $.ajax({ 

       type:'POST', 
       url: query_url, 
       data:{query: $("#keyword").val()}, 
       dataType:'json', 
       async: false, 
       success:function(d){ 

        $('#loading').html("").hide(); 

        //$('.display').dataTable().fnDestroy(true); 

        $("#example tbody").html(""); 

        for(i in d){ 

         $("#example tbody").append("<tr><td style='text-align: center; color:' data-code='TRUE'>" + d[i]['item_code'] + "</td><td style='text-align: left' data-name='TRUE'>" + d[i]['item_name'] + "</td><td><div style='text-align: center'><input type='button' value='ADD' class='k-button' id='" + d[i]['item_code'] + "' data-item=TRUE /></div></td></tr>"); 

        } 

        //$("#search_result").show('blind'); 

        $("[data-item]").on('click',function(){ 

         var code = $(this).parents('tr').find('[data-code]').html(); 
         var name = $(this).parents('tr').find('[data-name]').html(); 
         // console.log(code,name); 
         $("#grid1 tbody").append("<tr><td style='text-align: center; width: 20%'><input type='text' name='code[]' value=" + code + " readonly style='width:50px; background-color: transparent; border-style: none' id=code" + counter_code++ +" /></td><td style='text-align: center; width: 40%'><input type='text' style='width: 90%; background-color: transparent; border-style: none' name='item_name[]' value='" + name + "' id=item"+ counter_item++ +" readonly /></td><td style='text-align: center'><input type='text' name='qty[]' id=qty"+ counter_qty++ +" style='text-align: center; width: 50px;' /></td><td style='text-align: center'><div align='center'><select style='width:100px; display: block' name='unit[]' id=unit"+ counter_unit++ +" ><option value=''>----</option><option value='pc/pcs'>PC/PCS</option><option value='BOX/BOXES'>BOX/BOXES</option></select></div></td><td style='text-align: center'><input type='text' name='price[]' id=price"+ counter_price++ +" style='text-align: right; width: 100px;' onblur='' /></td><td style='text-align: center'><input type='text' name='total[]' id=total"+ counter_total++ +" style='font-family: courier; text-align: right; background-color: lightgray; color: red; width: 100px;' readonly='readonly' value='' /></td></tr>"); 

         ComputeTotal(); 

        }); 

        $('.display').dataTable({ 
         "bPaginate": true, 
         "bLengthChange": true, 
         "bFilter": true, 
         "bSort": true, 
         "bInfo": true, 
         "bAutoWidth": false, 
         "bDestroy": true, 
         "bJQueryUI": false, 
         "bRetrieve": true, 
         "sPaginationType": "full_numbers", 
         "iDisplayLength": 25, 
         "destroy": true 
        }); 

        //$('.display').dataTable().fnDestroy(true); 

        //$('.display').children().remove() 

       }, 

      });  

.... 




<div id="loading"></div> 

<div id="search_result" class="k-content"> 
    <div class="k-header" id="item-view-list" align="center"> 

     <table border="0" style="width: 80%; align: left" cellpadding="10" cellspacing="10" align="left"> 
      <tr> 
       <td colspan="3"> 
        <h5>SEARCH ITEM</h5> 
       </td> 
      </tr> 
      <tr> 
       <td style="width: 3%"> 
        <label>Enter Item Code</label> 
       </td> 
       <td style="width: 40%"> 
        <input type="text" name="keyword" id="keyword" style="width: 80%" /> <input type="button" value="SEARCH" id="search-btn" class="k-button" style="font-size: 12px" /> 
       </td> 
      </tr> 
     </table> 

     <hr /> 

     <table cellpadding="0" cellspacing="0" border="0" class="display" id="example" style="font-size:small; width: 100%"> 
      <thead> 
       <tr> 

       </tr> 
       <tr> 
        <th>CODE</th> 
        <th>NAME/DESCRIPTION</th> 
        <th></th> 
       </tr> 
      </thead> 
      <tbody> 

      </tbody> 
     </table> 
     <br /> 

    </div> 
</div>

来源

2013-10-20 Jerielle

对不起，先生，但我只是贴上我的代码以供参考。我唯一的问题是我包含的图像是GIF图像，当我试图在我的表单中显示时，它不会生成动画。 – Jerielle

也许是因为你的ajax'async：false'，它会导致所有页面冻结，直到它完成语句（在本例中为ajax进程）。 – Dvir

所以我应该怎么做动画我的形象？ – Jerielle

这是因为图像加载是异步的，它完成加载，然后再开始了ajax加载（这也是异步）。现在他们正在争夺在事件队列中获得第一名。

您可以试着给图片加载第一个机会 - 最好的方法是使用图像的onload回调调用ajax调用。

您也可以尽量拖延Ajax调用这样做，只是包装你的$就这样的：

setTimeout(function() {$.ajax({ 

     type:'POST', 
     url: query_url, 
     data:{query: $("#keyword").val()}, 
     dataType:'json', 
     async: false, 
     success:function(d){ ... 

...}}, 250); // delays 250 milliseconds

根据图像加载多少时间，你可能想增加或减少超时。

这就是为什么onload事件，而应使用：

$('#loading').html("<img src='"+image+"' class='loeader' 
        align='center' onload='start()' />"); 

function start() { 
    $.ajax({ 

     type:'POST', 
     url: query_url, 
     data:{query: $("#keyword").val()}, 
     dataType:'json', 
     async: false, 
     success:function(d){ ... 

    ...}) 
};

来源

2013-10-21 02:57:18 K3N

在jquery中显示加载器/微调器时，GIF图片不会动画

回答

相关问题