2016-07-04 4 views
0

jQueryはFirefox、Chrome、Operaではうまく機能しますが、Internet Explorerでは、になるまでには時間がかかりすぎます。AJAXコールの開始時にInternet Explorerが遅れる

私は多くの記事を読んで、可能な限り早くコードを作成しようとしました。クラスやforeachループなどの選択を避けましたが、比較的速い要求を送信しても、開始する。たとえば、

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"); 
     } 
    }); 
}; 

$body.addClass("loading");が起動するまでに約1秒かかります。コード自体は十分速く、読み込み画面とテーブルの作成までの時間は他のブラウザよりも長くはないが、読み込み画面が見えるようになるまでページがフリーズする。私はコードが完了するまでそのコードが必要であることを知っています。なぜなら、ローディング画面の理由は、ここでは大量のデータ(通常はクロムで1.4秒)をロードするからです。

追加情報:私はASP.NETフレームワークを使用し、Internet Explorer + Firefoxのサポートにはwebshim.polyfillを使用しています。次の私が唯一bootstrap.css/jsbootstrap-tokenfield.css/jsjquery-ui.cssを輸入し、jquery

をスタンダールJavaScriptファイルのデフォルトのASP.NETへの私は、Internet Explorerまたは私はそれをスピードアップするために行うことができますについて何も知りません。私を助けてもらえますか?

追加情報が必要なときは、私がこのような問題を抱えていないので、あなたが望むものを明確に尋ねて、どのように提供できるかを説明できるならば、親切になるはずです。

更新 pageloadで一度呼び出されるこのコード部分に問題はありますか?それはちょうどC#のバックエンドでのセッション変数をチェックし、trueまたはfalseを返しますが、それは非同期

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); 
    } 
}); 

}

アップデート2
私は知っているが、今、何がInternet Explorerの下で私のページを遅くですが、私は全く無知ですなぜ。これらの数行は、私のページをスローダウンしています。

<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> 

私がそれらを取り除くと、すべてがうまく動作します。たとえ入っていても、これらの要素に添付されたCSS/jsがなくても、すべてのの対話は1秒遅れます。すべてのクラスとバックグラウンド操作をすべて削除すると、ユーザーはリンクをクリックするまで待つ必要があります。なぜ誰が知っていますか?

+0

'getDisturbanceData()はどのように呼び出されますか?呼び出されるイベントとその関数呼び出しの間のすべてのコードを見る必要があります。 –

+0

使用しているI.Eのバージョンも提供できますか? –

+0

これはpageloadで呼び出されますが、これはすべてのAjaxリクエストが遅れて開始するため、ちょっとした問題です。ボタンをクリックして完全に空のAjaxリクエストを受信して​​も、起動するまでに時間がかかります –

答えて

1

$(document).ready()ハンドラの中にすべてのコードがあると思われます。これは、ブラウザがDOMが完全にロードされたことをブラウザが通知する前に、Ajaxリソースの取得が開始されないことを意味します。

このようにコードを整理します。 $(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); 

今、あなたの通常の$(document).ready()ハンドラの内部で:

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

これはAjaxのリソースをロードするための一般的なヒントです。できるだけ早くそれらを要求し始める。次に、ドキュメントがロードされたときに結果を処理するためにthe promise interface of jQuery Ajax requestsを使用します。

+0

+1のjediの例。 Googleのページスピードに悪影響を与えるため、私はそれが消費者のパブリックアクセスページであるなら、私は頭の中に入れません。閉じた ''タグの直前にラップしないで置いておきます。 libariesはロードされ、javascriptは解析されます。 DOMがすでに存在しているため、DOMを準備する必要はありません。数マイクロ秒を節約する。 – Tschallacka

+0

十分に公正で、私は ''についてのビットを削除しました。 – Tomalak

+0

ヒントはありがたいですが、問題は解決しません。 –

関連する問題