这个网站上的加载脚本是如何实现的？

问题描述：

我发现这个美妙的网站有一个页面顶部的加载栏。加载栏就像浏览器的加载栏，但我觉得它非常漂亮，并且希望在我的页面中实现它。这个网站上的加载脚本是如何实现的？

alt text http://www.picamatic.com/show/2009/02/28/05/27/2504915_236x44.jpg

http://www.cssjockey.com/

答

编辑：我的答案是错的，我回答时考虑不同的上下文。但是，我要离开它，因为当您需要显示加载/进度栏时，该信息可能非常有用。

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

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

希望有所帮助。 :)

答

他是用jQuery的ajaxStart和ajaxStop

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

基本上，这让他显示此图像加载，而任何异步调用正在取得进展。

答

如果你看看使用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

这个网站上的加载脚本是如何实现的？

相关推荐