異步加載多個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

回答

相關問題