一个炫酷的页面加载进度自动指示和 Ajax 导航效果 - Pace.js

在页面中引入 Pace.js  和您所选择主题的CSS文件,就可以让你的页面拥有漂亮的加载进度和Ajax导航效果。不需要挂接到任何代码,自动检测进展。您可以选择颜色和多种效果,有简约,闪光灯,MAC OSX,左侧填充,顶部填充,计数器和弹跳等等。

先下载js:https://raw.githubusercontent.com/HubSpot/pace/v1.0.0/pace.min.js

chrome内核的浏览器请右键另存为。

在它官网(地址:http://github.hubspot.com/pace/docs/welcome/)的themes上面选择你喜欢的样式和颜色,点击DOWNLOAD按钮下载css。

在网页中引入就行了。

如果你需要设置属性的话该js也提供了使用方法:

为ajax和elements、document、Eventlog这四个属性,使用方法如下:

paceOptions = { 
    ajax: false, // disabled 
    document: false, // disabled 
    eventLag: false, // disabled 
    elements: { 
        selectors: ['.my-page'] 
    };
}

其中比较有用的是ajax属性可以不去在ajax请求的时候使用加载条,elements属性为当页面存在它选择器中的元素时加载条消失。

 

 

 

评论

0条评论

    发表评论

    电子邮件地址不会被公开。 必填项已用*标注