jquery - jqueryui 进度条，直到页面完全加载

Question

对于此示例，请访问 blacksabbath.com 并查看进度条如何保持在顶部，直到页面完全加载。如何使用 jqueryui 进度条复制它？蒂亚！

Answer 1

他们在他们的网站上使用 jPreLoader。这是它的链接：http: //www.inwebson.com/jquery/jpreloader-a-preloading-screen-to-preload-images/

Answer 2

基本上对于这个过程，您实际上并没有加载页面，而是进行了 ajax 调用。页面可能是这样的：

<div class="body"></div>这用作虚构的身体标签。

比您进行 ajax 调用为：

window.onload = loadPage;这将确保它在页面加载时运行。

这是示例：http: //jsfiddle.net/NEfR2/

然后在此之后您可以通过 ajax 请求加载页面：

$(document).ready(function(){  
   function loadPage (){   
   $("#image_loading").show();    
     $.ajax({  // start the ajax request..  
     url: "link_to_the_page",  //the page where the data is saved
     data: "query_strings_if_any",  
     success: function (result) {  
     $("#image_loading").hide();  
     $(".body").html(result); 
   }    
 });  
 }  
}

这将首先开始显示加载图像，一旦 ajax 请求完成并返回响应。图像将被隐藏.hide()，响应将写入虚构的正文标签<div class="body"></div>中。我希望这是基本的。

图像可以是任何 gif 或某些图像，可以让您告诉用户正在加载内容。

Answer 3

您只能在加载了 jQuery 的进度条的情况下呈现白色页面，然后您可以在使用 AJAX 加载页面的其余部分时轻松控制进度条。

这是最简单的方法恕我直言。