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

我只是想问我的问题。我在jquery中创建了一个函数，该函数在搜索后在我的页面中显示加载器。但我的问题是图像没有动画。

这是我的代码。我正在使用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>