Question

我有一个加载栏是一个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>

Answer 1

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

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

使用Ajax 和正常加载时调用相同的URL。使用服务器端来获取HTTP标头X-REQUESTED-WITH: XMLHTTPRequest，如果它存在，只需发送内容。这样，没有JavaScript的用户可以点击相同的链接并访问独立版本
对于较新的浏览器，您希望更新浏览器的URL而不实际更改页面。最好使用window.history.pushState（see here来实现，但请记住，支持非常有限，特别是如果您的目标受众使用的是IE。
- 我自己从未真正使用它，但我知道Ajaxify是一个非常受欢迎的插件，可以帮助您解决这个问题。我知道它会使用pushState（如果可用），否则它将使用“hashbangs”来更新URL。这些在Twitter and Facebook等大型网站上非常受欢迎，但如果您使用的是现代浏览器，则可能会发现它们不再使用它们。他们倾向于分歧意见，主要是因为他们没有正确跟踪用户的历史记录，但据我所知，他们是旧版浏览器的唯一选择。我建议你阅读更多内容。
也许有更好的选择，但this tutorial向您展示了获取每个请求进度的一种方法。
最后，在构建加载栏时，我不打算使用jQuery来制作漂亮的幻灯片效果，而是根据transition使用CSS width。然后你的jQuery只需要更改load-bar元素的width，而CSS将负责其余部分。 See tutorial

更改jQuery加载栏，使其不重定向（类似于Youtube新加载栏）

1 个答案: