Question

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

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加载页面的其余部分时可以轻松控制进度条。

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

jquery ui进度条直到页面完全加载

3 个答案: