CODEWITHSUNDEEP
javascriptjqueryajax
Robin Schambach
Robin Schambach

Reputation: 846

Internet Explorer delayed in starting an AJAX call

My jQuery works very well in Firefox, Chrome and Opera but in Internet Explorer it takes too much time until it starts.

I've read many articles and tried to make my code as fast as possible, avoided selections by class, foreach loops and so on, but even when I send a relatively "fast" request it takes so much time until it starts. For example:

function getDisturbanceData() {
    $body.addClass("loading");
    $.ajax({
        type: "POST",
        url: "Default.aspx/GetAllDisturbances",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        data: JSON.stringify({
            "itemsPerPage": itemsPerPage
        }),
        success: function (data) {
            CreateTable(data.d);
            $body.removeClass("loading");
        }
    });
};

The above takes around 1 second before $body.addClass("loading"); starts. The code itself is fast enough, the time between the loading screen appears and the table is created is not longer than in any other browser but the pages kinda freezes until users can see a loading screen. I know the code needs its time until it is finished because I load a heavy amount of data here (in chrome usually 1.4s) thats the reason for the loading screen but I can't explain the time before that.

Additional information: I use ASP.NET framework, and webshim.polyfill for Internet Explorer + Firefox support. Next to the default ASP.NET javascript files I only imported bootstrap.css/js, bootstrap-tokenfield.css/js, jquery-ui.css and standart jquery

I don't know anything about Internet Explorer or what I can do to speed it up. Can you please try to help me?

When you need additional information it would be kind if you could ask clearly what you want and describe how I can provide them since I never had such a problem.

Update Could the problem be in this part of code that is called once on pageload? It just checks a Session variable in c# backend and returns true or false but it is async

function IsUserLogedIn(handleData) {
$.ajax({
    type: "POST",
    async: !1,
    url: "logon.aspx/IsUserLogedIn",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (data) {
        handleData(data.d);
    }
});

}

Update2
I know now what slows my page in Internet Explorer down but I'm totally clueless why. These few lines

<div id="logon_table">
    <asp:Label ID="lblName" runat="server" Font-Bold="true" Text="Name:"></asp:Label><br />
    <input type="text" ID="txtName" /><br /><br />
    <asp:Label ID="lblpwd" runat="server" Font-Bold="true" Text="Passwort:"></asp:Label><br />
    <input type="password" id="txtPassword"/><!--this element is the problem--><br /><br />
    <input type="button" ID="ButtonLogin" Value="Login" autofocus />
    <input type="button" ID="ButtonCancel" Value="Abbrechen"  />
</div>

slowing my page down. When I remove them everything works fine, as soon as they are in - even without any css/js attached to these elements every interaction is delayed by 1s. When I remove every class and every background operation users still have to wait until they clicked a link. Does anybody know why?

Upvotes: 0

Views: 392

Answers (1)

Tomalak
Tomalak

Reputation: 338128

I suspect you have all your code inside a $(document).ready() handler somewhere at the bottom of the page, which means fetching the Ajax resources will not start before the browser notifies that the DOM is fully loaded.

Organize your code like this instead. Outside of $(document).ready():

function getDisturbanceData(itemsPerPage) {
    // don't use a POST request to GET data
    return $.ajax({
        type: "POST",
        url: "Default.aspx/GetAllDisturbances",
        dataType: "json",
        data: {
            itemsPerPage: itemsPerPage    // jQuery does the JSON serializing
        }                                 // (also think whether JSON is necessary to
    });                                   // deliver *a single* parameter)
}

$('body').addClass("loading");
var disturbanceData = getDisturbanceData(25);

Now, inside of your regular $(document).ready() handler:

disturbanceData.done(function (data) {
    CreateTable(data.d);
}).fail(function (jqXhr, status, error) {
    // show the error somewhere
}).always(function () {
    $('body').removeClass("loading");
});

This is a general tip for loading Ajax resources. Start requesting them as soon as possible. Then work with the promise interface of jQuery Ajax requests to handle the results when the document is loaded.

Upvotes: 1

Related Questions