Jquery lazy loading is not working and not giving any errors in console-CodePudding

I have implemented a Jquery loader in my function which gets call on button click.

Here is the sample code

function fnLoadVendorData() {

    var vendorSel = $("#ddlVendorName option:selected").text();
    var strCircle = $("#lblRole").text();
    // $('#imgLoader').show();
    if (vendorSel != "--Select Vendor--" && typeof (vendorSel) != 'undefined') {
        $.ajax({
            type: "POST",
            url: "Ipfee.aspx/GetVendorData",
            data: JSON.stringify({ "vendorName": vendorSel, "strCircle": strCircle }),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            async: false,
            success: function (response) {                
                if (response.d != "NoDataFound") {
                    $('#imgLoader').show();
                    var getDatalist = JSON.parse(response.d);                    
                    Create_vendorDataTable(getDatalist);
                     $('#imgLoader').hide();
                } else {
                    // $('#imgLoader').hide();
                    jAlert("Data not available !!", "Information");
                    return false;
                }
                $('#imgLoader').hide();
            },
            error: function (response, textStatus, errorThrown) {
                // $('#imgLoader').hide();
                jAlert(textStatus, "Information");
            }
        });
    }
}

<img src="Images/ipload.gif" id="imgLoader" style="display: none; width: 100%; height: 100%; z-index: 9999;" />


<div >
                                    <div >
                                        <div >

                                            <select name="ddlVendorName" id="ddlVendorName" >
    <option value="--Select Vendor--">--Select Vendor--</option>
    <option value="1032">IPFEE_INDUS</option>
    <option value="1028">IPFEE_TVIPL</option>
    <option value="1033">IPFEE_ASCEND</option>
    <option value="1029">IPFEE_BIL</option>
    <option value="1031">IPFEE_GTL</option>

</select>
                                            <label>Vendor Name</label>
                                        </div>
                                    </div>
                                    <div >
                                        <div >
                                            <button type="button"  id="btnFilterClick"><i  aria-hidden="true"></i>Filter</button>
                                        </div>
                                    </div>
                                </div>

Please suggest what I am doing wrong here.

CodePudding user response：

After searching a lot on internet and other post on stackoverflow, I found that the async call false was making it stop from loading the gif. So I set it to true like below

async : true;

After changing that it worked.