0

私はアプリケーションの新しいプロトタイプに取り組んでおり、開始する前にいくつかのテストを実施しています。ページに多くの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コードは、それぞれのページに新しいIframeを追加するように注意します。すべてのURLは同じページを指しています。これは、ローカルIIS 7.5でホストされている単純なasp.netページであり、Page_Loadに次のコードが含まれています。

Thread.Sleep(2000);

私が期待しているのは、すべてのiframeが同時に読み込まれることです。私が得た結果は、それらが6つのセットでロードされていることです（つまり、20：6/6/6/2の場合）。何か理由/解決策はありますか？

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

4

1 に答える 1

2

表示されている問題は、サーバーへの接続の最大数に関連しています。これはブラウザ固有の番号であり、クロムは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-09T19:43:48.137 に答える