Bootstrapのタブシステムの遅延についてはよく知らないか、認識していません。問題が特定の用途やコンピューターによるものではないことを確認することをお勧めします。使い慣れたブラウザでjQueryハッシュチェンジプラグインを使用して遅延を発生させることはできませんでした。
ハッシュベースのナビゲーションを処理する他の方法に関しては、jQueryhashchangeプラグインを使用してhashchangeイベントのコンテンツ/ページを変更するために次のように記述しました。主に、ハッシュを使用したバック/フォワード/リンクをクリーンにサポートするため。以下は、私が使用しているもののトリミングされたバージョンです。
この例は、アンカーリンクを提供するだけでなく、onclickイベントで生成されます。ユーザーが現在アクティブなタブをクリックしてもページが再ロードされるため、onclickイベントを使用することをお勧めします。ページの読み込み時間は、ページが100ミリ秒以内に2回読み込まれないように追跡されます。
jQueryハッシュプラグイン：http：//benalman.com/projects/jquery-hashchange-plugin/
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://benalman.com/code/projects/jquery-hashchange/jquery.ba-hashchange.js"></script>
<script>
var hashUris = [];
var tabSet;
var actPage = '';
// bare tab array (use to populate tab html and hash array)
tabSet = [{hash: 'page1', pageId:1, id: 1}, {hash: 'page10', pageId:10, id:2 }, {hash: 'page20' , pageId: 20, id: 3}];
// handles the hash events
$(function() {
// loop all tab array, add items to hash array, determine primary page and active page
$.each(tabSet, function(i, tab) {
// using tabIndex to prevent looping hash array later
tab.tabIndex = i;
// first tab is primary by default
if (typeof priTabId == 'undefined') priTabId = tab.id;
// add tabs/page info to hash array
hashUris.push({hash: tab.hash, pageId: tab.pageId, tabIndex: i, tabId: tab.id, priActive: priTabId == tab.id});
// initial page to be loaded
if (priTabId == tab.id) priTabIndex = i;
// current hash
if (location.hash && '#'+tab.hash == location.hash) activeTabIndex = i;
});
if (!location.hash && !actPage && typeof priTabIndex != 'undefined') {
// page load, load primary tab
loadTabPage(priTabIndex);
} else if (location.hash && !actPage && typeof activeTabIndex != 'undefined') {
// page refresh
loadTabPage(activeTabIndex);
}
$(window).hashchange( function(){
if (location.hash) {
$.each(hashUris, function(index, hashUri) {
if ('#'+hashUri.hash == location.hash && actPage != hashUri.pageId + '#' + hashUri.hash) {
// found matching tab/page
loadTabPage(hashUri.tabIndex);
}
});
} else if (actPage) {
// navigated to empty space, attempt to find a primary active page
$.each(hashUris, function(index, hashUri) {
if (hashUri.priActive) loadTabPage(hashUri.tabIndex);
});
}
});
});
function loadTabPage(tabIndex) {
if (typeof tabSet[tabIndex] == 'undefined') return;
// track when the page was loaded
lastLoad = tabSet[tabIndex].lastLoad;
tabSet[tabIndex].lastLoad = new Date().getTime();
// load only once in 1ms-100ms
if (tabSet[tabIndex].lastLoad - lastLoad < 100) return;
// load page content/do actions here
alert(tabSet[tabIndex].pageId);
//$("#content").load('?pageId='+tabSet[tabIndex].pageId);
// active page checked against hash during hashchange
actPage = tabSet[tabIndex].pageId + '#' + tabSet[tabIndex].hash;
};
// user code to create tabs
$(function() {
// use tabs array to display some tabs
// this depends on the above code to set .tabIndex on the tabSet array
tabsObj = $('<div/>');
$.each(tabSet, function(i, tab) {
if (!tab.hash) return true;
tmpObj = $('<span>'+tab.hash+'</span>');
tmpObj.data('tabIndex', tab.tabIndex);
// use an onclick event to change the page
tmpObj.bind('click', function(e) {
if (typeof $(this).data('tabIndex') == 'undefined' || typeof tabSet[$(this).data('tabIndex')] == 'undefined') return;
// load page directly if active hash, otherwise change to clicked hash
if ('#'+tabSet[$(this).data('tabIndex')].hash == location.hash) {
loadTabPage($(this).data('tabIndex'));
} else {
location.hash = tabSet[$(this).data('tabIndex')].hash;
}
e.stopPropagation();
return false;
});
tmpObj.appendTo(tabsObj);
delete tmpObj;
});
tabsObj.appendTo($("#tabs"));
delete tabsObj;
});
</script>
<div id="tabs"><a href="#page1" >Link to Hash</a></div>
<div id="content"></div>