複数のiframeが非同期でロードされる

私はアプリケーションの新しいプロトタイプを作成しています。開始する前にいくつかのテストを行っています。私は自分のページに多くのiframeを作成しようとしています。非同期ロードを確認するためにこのコードを書きましたが、私が経験している動作は私が期待したものではありません。複数のiframeが非同期でロードされる

ここで私が使用しているコード：

<html> 
    <head> 
    <title>test</title> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
    <script type="text/javascript"> 
     function appendNew(container, location) { 
     var chart = $("<iframe>") 
      .attr('src', location) 
      .css('width', 150) 
      .css('height', 150); 

     container.append(chart); 
     } 

    $(function() {        
     var urls = ["http://local.test.com?test=1", 
        ... 
        "http://local.test.com?test=20"]; 

     var container = $("#testDiv"); 

     $.each(urls, function (idx, item) { 
      appendNew(container, item); 
     }) 
    }) 
    </script> 

    </head> 
    <body> 
     <div id="testDiv"></div> 
    </body> 
</html>

それはURLアレイ上だけのループですが、いくつかのjQueryコードは、それらの各1ページに新しいiFrameを追加する世話をします。すべてのURLが同じページを指す、それはPage_Loadのに次のコードで私の地元のIIS 7.5でホストされているだけのシンプルなasp.netのページです：私は何を期待

Thread.Sleep(2000);

すべてのiframeがにロードされていることです同じ時間。結果は6つ（つまり20：6/6/6/2）のセットで読み込まれるという結果になります。理由/解決策はありますか？

この動作は、Chrome、Firefox、IEで同じです。

出典

2012-04-09 abx78

表示される問題は、サーバーへの最大接続数に関連しています。これはブラウザ固有の番号で、chromeは6に設定されています。ドメインをiframeに変更すると、読み込みの変更が表示されます。

<html> 
    <head> 
    <title>test</title> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
    <script type="text/javascript"> 
     function appendNew(container, location) { 
     var chart = $("<iframe>") 
      .attr('src', location) 
      .css('width', 150) 
      .css('height', 150); 

     container.append(chart); 
     } 

     $(function() { 
      var urls = []; 

      var changeDomains = true; 
      for (i = 1; i <= 20; i++) { 
       if (changeDomains) { 
        urls[i] = "http://local" + i + ".test.com?test=" + i; 
       } 
       else { 
        urls[i] = "http://local.test.com?test=" + i; 
       } 
      } 

      var container = $("#testDiv"); 

      $.each(urls, function (idx, item) { 
       appendNew(container, item); 
      }) 
     }) 
    </script> 

    </head> 
    <body> 
     <div id="testDiv"></div> 
    </body> 
</html>

出典

2012-04-09 19:43:48

これは間違いありません。私は同じアプリケーションを指す4つのサブドメイン（local01、02、03、04）でテストを複製し、すべてのリソースが非同期にロードされるようになりました。ありがとうショーン！ – abx78

複数のiframeが非同期でロードされる

答えて

関連する問題