Internet Explorer发现浏览器的位置发生了延迟

Question

这可能是常识，但我似乎无法找到任何有关此问题的信息。这里有一个小背景：

我有一些页面使用Bootstrap的标签系统。在这些页面的$(document).ready()函数中，有一些基本代码可以根据URL中的哈希来激活选项卡，而一个简短的函数会附加到标签显示的函数中，用于更改位置的哈希值location.replace。其结果是，您可以链接到特定的标签，同时刷新页面可让您保持当前标签。这适用于所有情况，但Internet Explorer。

在IE浏览器（我一直在测试IE9），似乎有一个延迟（约10-15秒）之前，IE认识到位置哈希已更改。当手动输入哈希到地址栏并加载页面时会发生类似的事情 - 需要几次刷新才能识别。单击嵌入在其中的哈希链接似乎加载正常。

我假设这是一种小故障。我想我可以将一个cookie附加到处理持久标签状态的代码中，但是有其他人找到了更好的方法来处理这个问题吗？

Answer 1

我不熟悉或意识到Bootstrap的TabBack系统有任何延迟，您可能想要验证问题不是由于您的特定用途或计算机造成的。我无法在任何我熟悉的浏览器上使用jQuery hashchange插件产生任何延迟。至于其他处理基于散列的导航的方式，我写了以下内容以使用jQuery hashchange插件更改hashchange事件上的内容/页面;主要是干净地支持后退/前进/链接与哈希。我遵循的是我使用的修剪版本。

该示例提供了一个锚链接以及onclick事件生成的链接。首选使用onclick事件是因为如果用户单击当前活动的选项卡，该页面仍会重新加载。跟踪页面加载时间以确保页面在100毫秒内不会被加载两次。

的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> 

Answer 2

就遇到过这个问题对于一些客户谁运行IE8。我们有一个运行sammy.js +淘汰赛和引导程序的网页。每个路由（哈希链接）花费大约800-900毫秒导航到。但是，当我从页面中删除所有CSS /样式每个路由导航花费约30毫秒。