异步加载多个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代码会照顾到一个新的Iframe附加到页面他们中的每一个。所有URL指向同一个页面，它只是通过我的本地IIS 7.5与下面的代码在Page_Load举办一个简单的asp.net页面：

Thread.Sleep(2000);

我想到的是，所有的I帧在加载同一时间。我得到的结果是，它们被加载成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 2012-04-09 20:30:17

异步加载多个Iframe

回答

相关问题