目前很多网站都可以看到这样的效果,在加载页面时,加载进度都是在浏览器的顶部,以下介绍下一个jQuery的插件LoadingBar.js,此插件显示的效果如下图:
此插件使用的是ajax方式进行加载的,使用方法如下:
HTML代码
<a href=”<<URL>>” class=”ajax-call”>..</a>
<div id=”loadingbar-frame”></div>
<<URL>>为你需要加载的地址
JavaScript代码
$(“.ajax-call”).loadingbar({
target: “#loadingbar-frame”,
replaceURL: false,
direction: “right”,/* Default Ajax Parameters. */
async: true,
complete: function(xhr, text) {},
cache: true,
error: function(xhr, text, e) {},
global: true,
headers: {},
statusCode: {},
success: function(data, text, xhr) {},
dataType: “html”,
done: function(data) {}
});
target: “#loadingbar-frame”,
replaceURL: false,
direction: “right”,/* Default Ajax Parameters. */
async: true,
complete: function(xhr, text) {},
cache: true,
error: function(xhr, text, e) {},
global: true,
headers: {},
statusCode: {},
success: function(data, text, xhr) {},
dataType: “html”,
done: function(data) {}
});
注意:在使用的使用一定要加载jQuery,否则无法显示效果!