Question

我发现这个精彩的网站在页面顶部有一个加载栏。加载栏就像浏览器的加载栏一样，但我发现它非常漂亮，并希望在我的页面中实现它。

http://www.cssjockey.com/

Answer 1

如果您使用firebug查看该网站，您可以看到作者正在使用jQuery JavaScript框架来实现加载栏。

相关代码，位于http://www.cssjockey.com/wp-content/themes/cj_pro/scripts/custom.js部分的<head>脚本

中

$(window).load(function(){
$("#loading").addClass("hidden");
});
 $("#loading").ajaxStart(function(){
 $(this).show();
 });
 $("#loading").ajaxStop(function(){
 $(this).hide();
 });

其中loading是包含加载gif图像的div的id

Answer 2

他正在使用jQuery的ajaxStart和ajaxStop

$("#loading").ajaxStart(function(){ 
  $(this).show(); 
});
$("#loading").ajaxStop(function(){ 
  $(this).hide(); 
});

这基本上允许他在进行任何异步调用时显示此加载图像。

Answer 3

编辑：我的回答是错的，我回答了不同的背景。但是，我要离开它，因为当您需要显示加载/进度条时，信息可能很有用。

他正在使用：http://www.filamentgroup.com/lab/update_automatically_preload_images_from_css_with_jquery/。

但是，他没有使用它的全部功能（在上面的URL上查看演示）。加载栏只是一个动画gif文件。我想你可以在http://ajaxload.info获得它。

希望有所帮助。：）

如何实施本网站上的加载脚本？

3 个答案: