使用微调器加载jQuery整个HTML页面

我正在尝试一些简单的事情 – 制作一个jQuery脚本，等待显示整个页面，包括所有DIV，文本和图像。 在加载页面时，我不想显示页面的某些部分，而是显示旋转的GIF图像，而当整个页面加载时，我们可以在浏览器窗口中淡化页面内容。

有很多脚本可以将ajax请求加载到容器DIV中 – 但这是不同的。 这将在加载HTML页面时显示旋转的GIF。 任何帮助表示赞赏

此类脚本仅适用于ajax请求

$('#loadingDiv') .hide() // hide it initially .ajaxStart(function() { $(this).show(); }) .ajaxStop(function() { $(this).hide(); }); 

Answer 1

加载DOM后， $(document).ready(...)将立即触发。 这太早了。 你应该使用$(window).on('load', ...) ：

JavaScript的：

 $(window).on('load', function(){ $('#cover').fadeOut(1000); }) 

CSS：

 #cover { background: url("to/your/ajaxloader.gif") no-repeat scroll center center #FFF; position: absolute; height: 100%; width: 100%; } 

HTML：

看看这个jsFiddle： http ： //jsfiddle.net/gK9wH/9/

Answer 2

我会用覆盖覆盖整个页面，然后在页面加载后删除覆盖。 你可以调整一下，如果你愿意也可以显示loading.gif。 这是一个例子：

HTML

 ​ 
 
Header
 
Page content goes here.
 
 Remove Overlay 
 ​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ 

CSS

 #container{padding:20px;} h2 {margin-bottom: 10px; font-size: 24px; font-weight: bold;} #overlay { position: absolute; top: 0; left: 0; width: 100%; height:2305px !important; /*change to YOUR page height*/ background-color: #000; filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; z-index: 998; } #remove_overlay{position:relative; z-index:1000;} 

jQuery的：

 $(document).ready(function () { // Set a variable that is set to the div containing the overlay (created on page load) var page_overlay = jQuery('
 
'); // Function to Add the overlay to the page function showOverlay(){ page_overlay.appendTo(document.body); } // Function to Remove the overlay from the page function hideOverlay(){ page_overlay.remove(); } // Show the overlay. $(showOverlay); }); }); $(document).ready(function () { $(hideOverlay); }); 

您需要对此进行调整，以便在请求页面时立即加载叠加层（调整$(showOverlay);调用以便在文档准备好之前触发它。

这是一个简单的工作小提琴，带有一个按钮，可以移除叠加层。 你应该可以从那里去:) http://jsfiddle.net/3quN5/

Answer 3

我认为最好的方法是有一个’cover’div，它将在加载时覆盖整个页面。 它会是不透明的，并且会包含你的GIF。

一旦页面加载，以下内容将隐藏div：

 $(document).ready(function() { // Hide the 'cover' div }); 

以下将使div成为页面的大小：

 .div{ height:100%; width:100%; overflow:hidden; } 

Answer 4

首先，你的意思是身体标签之间的一切吗？ 做旋转礼物的最好方法是添加一个将gif定义为无重复和居中的类。 在页面准备好显示时删除类。

 $('body').addClass('loading') $('body').removeClass('loading') 

这总是最好的技术，因为如果你提交的东西然后尝试通过DOM添加gif，一些浏览器将不会这样做，因为页面已经提交。