0

I'm working on a new prototype for an application and I'm conducing some tests before starting. I'm trying to create many iframes in my page. I wrote this code in order to verify the asynchronously loading, but the behavior I'm experiencing is not what I expected.

Here the code I'm using:

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

It's just a loop on a url array, some jQuery code will take care to append a new Iframe to the page for each one of them. All the urls point to the same page, it's just a simple asp.net page hosted by my local IIS 7.5 with the following code into the Page_Load:

Thread.Sleep(2000);

What I expect is that all the iframes are loaded at the same time. The result I get is that they're loaded in sets of 6 (i.e. when 20: 6/6/6/2). Any reason/solution?

This behavior is the same on Chrome, Firefox and IE.

4

1 回答 1

2

您看到的问题与服务器的最大连接数有关。这是浏览器特定的编号，我相信，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-09T19:43:48.137 回答