异步加载多个 iframe答案

【问题标题】：Multiple Iframes loaded asynchronously异步加载多个 iframe
【发布时间】：2012-04-09 19:24:00
【问题描述】：

我正在开发一个应用程序的新原型，并且在开始之前我正在进行一些测试。我正在尝试在我的页面中创建许多 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 都指向同一个页面，它只是一个简单的 asp.net 页面，由我的本地 IIS 7.5 托管，在 Page_Load 中包含以下代码：

Thread.Sleep(2000);

我希望同时加载所有 iframe。我得到的结果是它们以 6 个为一组加载（即 20 时：6/6/6/2）。有什么原因/解决方案？

这种行为在 Chrome、Firefox 和 IE 上是相同的。

【问题讨论】：

标签： jquery asp.net iis iframe

【解决方案1】：

您看到的问题与服务器的最大连接数有关。这是浏览器特定的数字，我相信 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>

【讨论】：

绝对是这样。我用指向同一个应用程序的 4 个子域（local01、02、03、04）复制了测试，现在所有资源都是异步加载的。谢谢肖恩！