javascript - Jquery 加载图像 - 处理网络浏览器中的后退/前进按钮

Question

我使用以下方法在加载页面时显示加载图像，以通知用户加载操作正在进行中。如果我在网络浏览器中按“后退”按钮，有时页面会以加载图像开始，然后页面就会卡住。我想确保如果用户在网络浏览器中按下后退/前进按钮，则要显示加载图像。

正在使用的方法。

Javascript:

<script language="javascript" type="text/javascript">
$(document).ready(function (){
  //This line below would hide the div when the page load by default
  $('#loading').hide();

  //This would display when the user clicks the button
  $('#buttonID').click(function (){
    if( $('#search_string').val().length !== 0 ) {    
    $('#loading').show();
    }
  });
   $('a.la').click(function (){
    $('#loading').show();
 });
});
$(window).load(function() {
$('#loading').hide();
});
</script>

CSS

#loading {
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   position: fixed;
   display: block;

   z-index: 99;
   text-align: center;
}

#loading-image {
  position: absolute;
  top: 160px;
  left: 130px;
  z-index: 100;
}

HTML

<button id='buttonID' type="submit"></button>
<a class="la" href="search.php">Some text</a><br>

Answer 1

最好听听浏览器并以这种方式编写您的应用程序，这样这些事情就变得无关紧要了。

而且浏览器正在将越来越多的东西锁定到客户端 javascript 应用程序也是事实，因此您的应用程序很可能在(少数)浏览器升级后失败

这里有很好的解释:HTML 5 History Spec 并在此处演示:History Demo