JQuery 模拟youtube的网页加载特效

需要JQuery 和NProgress 两个库

NProgress 在Github 的项目地址 

每个页面都要加载 nprogress .js 和nprogress.css 两个文件

在此将手写的JS代码放入common.js 文件中

<!--html页面部分-->
<link href="/script/nprogress.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/script/nprogress.js"></script>
<script type="text/javascript"  src="/script/common.js"></script>
<!--html页面部分结束-->

common.js

$(function(){
    $("a").click(function(){
        var link = $(this).attr("href");
        var target= $(this).attr("target");
        if(<span style="font-family: Arial, Helvetica, sans-serif;">target</span>=="_blank"){//如果设定的是新窗口打开，不使用这种加载方式
            return true;
        }else{
            NProgress.start();//开始显示滚动条
            $.get(link,{},function(data){//获取新加载的内容，具体参数组合等等可以参考JQuery $.get()的方法。
                $(document.body).html(data);//加载过程中，滚动条渐渐增加                  
	        window.location.href = link;//跳转到加载完成的页面
            }); 
            NProgress.done();//加载完成滚动条结束                       
            return false;        
       }    
});});

 window.location.href = link;

这条命令是在加载完成后进行一次跳转。因为已经加载过，再跳转一次用的时间会非常短，页面一般不会闪烁。

如果不加这行命令，会在当前页面加载新页面但是url不会发生改变。

部分效率偏低的浏览器会因为缓存的问题，变得非常卡。