0

我有这个加载栏，它是一个 Jquery 插件，可以在这里找到： http ://www.jqueryscript.net/loading/Smooth-Progress-Bar-Loading-Effect-With-jQuery.html

但是，该栏适用于重定向，而不是显示实际加载的内容。当来自 $(this).children().html ... 的以下代码到位时，我看到 Inspect Element 选项卡中的进度条从 0% 变为 100%。加载时很棒，但是我希望页面保持最新状态并加载单击的任何其他页面，一旦栏为 100%。

有点类似于新的 youtube red 预加载器。很确定这个脚本能够做到这一点，但经过数小时的调整和尝试更改，我似乎无法弄清楚如何。

我是 PHP 头和新的 jQuery：/

<script type='text/javascript'>
    function loading(percent){
        $('.progress span').animate({width:percent},1000,function(){
            $(this).children().html(percent);
            if(percent=='100%'){
                $(this).children().html('Loading Complete, Redirect to Home Page...&nbsp;&nbsp;&nbsp;&nbsp;');
                setTimeout(function(){
                    $('.container').fadeOut();
                    location.href="http://www.jqueryscript.net";
                },1000);
            }
        })
    }
  </script>
4

1 回答 1

0

这似乎是一种愚蠢的 Ajax 重定向方式。您不想完全加载新页面，这就是Ajax 真正有益的原因，因为您只需要刷新内部内容。

通过 Ajax 加载页面的更好方法包括：

  • 使用 Ajax和正常加载时调用相同的 URL 。使用您的服务器端获取 HTTP Header X-REQUESTED-WITH: XMLHTTPRequest，如果存在，只需发送内容。这样，没有 JavaScript 的用户可以点击相同的链接并访问独立版本
  • 对于较新的浏览器，您希望在不实际更改页面的情况下更新浏览器的 URL。最好使用window.history.pushState(请参阅此处，但请记住，对 的支持非常有限，特别是如果您的目标受众正在使用 IE。
    • 我自己从未真正使用过它，但我知道Ajaxify是一个非常流行的插件，它可以帮助您解决这个问题。据我所知，它将使用pushState如果可用，否则它将使用“hashbangs”来更新 URL。这些在Twitter 和 Facebook等大型网站中非常流行，但如果您使用的是现代浏览器，您可能会注意到它们不再使用它们。他们倾向于产生分歧，主要是因为他们没有正确跟踪用户的历史记录，但据我所知，它们是旧浏览器的唯一选择。我建议你阅读更多关于它们的内容。
  • 也许有更好的选择，但本教程向您展示了一种获取每个请求进度的方法。
  • 最后，在构建你的加载栏时，我不会费心使用 jQuery 来制作漂亮的幻灯片效果，而是使用 CSS 来transition基于width. 然后你的 jQuery 只需要改变widthload-bar 元素的属性，其余的由 CSS 来处理。见教程
于 2013-08-18T14:53:20.427 回答