如何使用jQuery默認預加載所有選項卡

如果我有4個選項卡，其中前2個選項是使用ajax加載的，而最後2個選項是靜態選項，那麼默認情況下如何預加載2 ajax選項卡？如何使用jQuery默認預加載所有選項卡

目前，只有第一個標籤被自動加載，第二個被點擊加載。我希望它們都被加載，所以當我點擊第二個時，內容已經加載。我試着這樣調用第二個選項卡上加載事件：

$(document).ready(function() { 
    $("#main-tabs").tabs({ 
     cache: true 
    }); 

    $("#main-tabs").tabs("load", 1); 
});

而這個加載第二個選項卡，但對於一些奇怪的原因，第一個不會加載在所有;即使我點擊不同的標籤並點擊第一個標籤，也不會加載。

然後我試圖這樣的事情：

$(document).ready(function() { 
    $("#main-tabs").tabs({ 
     cache: true 
    }); 

    $("#main-tabs").tabs("load", 0); 
    $("#main-tabs").tabs("load", 1); 
});

同樣的結果，第二個選項卡被加載，第一個是不是。

他們怎麼能自動加載（ajax的）？

來源

2010-09-10 Ricardo Amaral

來源問題

兩個事實：

當jQuery的加載選項卡以其load方法，如果另一個AJAX加載請求正在進行，這將被中止（可能是因爲如果你選擇一個標籤，並通過AJAX加載，然後快速選擇另一個加載，jQuery假定你不想加載兩個 - 只是最後一個）。
當您將第一個選項卡設置爲由AJAX加載時，默認情況下會調用.tabs("load",0)來填充第一個選項卡。

結合這兩個事實，你會看到發生了什麼。 load被首先調用來填充第一個選項卡，然後再次調用以填充第二個選項卡。第二個負載取消了第一個負載。

可能的解決方法

因爲你不能在同一時間同一選項卡菜單上發出多個load S，我們將不得不另謀出路。此解決方案使用選項卡的load選項按順序加載每個選項卡。換句話說，當一個負載完成時，它開始加載下一個。當那個完成時，它加載下一個，依此類推。

//the indexes to be loaded. 
//In your case it's only index 1 (index 0 is loaded automatically) 
var indexesToLoad = [1]; 

var loadNextTab = function() { 
    if (indexesToLoad.length == 0) return; 
    var index = indexesToLoad.shift(); 
    $("#main-tabs").tabs("load",index); 
}; 

$("#main-tabs").tabs({ 
    cache: true, 
    load: loadNextTab 
});

可能改進這種方法：

，而不是指定索引的加載，使其找出自己哪些選項卡是AJAX標籤並加載它們
使它這樣loadNextTab可以同時在多個選項卡式菜單上使用
使其可與其他負載回調函數集成（如果這是一個詞）

我怎麼知道哪裏出了問題？

通過使用firebug。這是一個Firefox的插件。 Firebug在其控制檯中顯示所有的AJAX請求，並且截圖顯示，確定發生了什麼並不困難:)我真的推薦它。（也有類似的工具，對於大多數主流瀏覽器 - 。按ctrl +鍍鉻或F12我即是Shift + J）

Screenshot of Firebug console showing ajax requests

來源

2010-09-10 22:55:38

是的，我知道螢火蟲的，我把它和使用它很多關於幾但我需要學習如何正確使用它。我必須進一步探索...感謝修復。我還沒有嘗試過，但我明白這個問題，爲什麼會發生，你的解決方案是否有意義。 – 2010-09-11 04:23:57

如何使用jQuery默認預加載所有選項卡

回答

相關問題