我正在尝试做一些简单的事情——制作一个 jQuery 脚本，该脚本将等待显示整个页面，包括所有 DIV、文本和图像。在页面加载时，我想显示一个旋转的 GIF 图像，而不是显示页面的一部分，当整个页面加载时，我们可以在浏览器窗口中淡化页面的内容。
有很多脚本可以通过 ajax 请求加载到容器 DIV 中——但这是不同的。这将在加载 HTML 页面时显示旋转的 GIF。任何帮助表示赞赏
这种类型的脚本只适用于 ajax 请求
$('#loadingDiv')
.hide() // hide it initially
.ajaxStart(function() {
$(this).show();
})
.ajaxStop(function() {
$(this).hide();
});
【问题讨论】：
$(document).ready(...) 在 DOM 加载后立即触发。这还为时过早。你应该使用$(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：
<div id="cover"></div>
<!-- rest of the page... -->
看看这个 jsFiddle：http://jsfiddle.net/gK9wH/9/
【讨论】：
我会用叠加层覆盖整个页面，然后在页面加载后移除叠加层。如果您愿意，您可以调整它以显示 loading.gif。 这是一个例子：
HTML
<body>
<div id="container">
<h2>Header</h2>
<p>Page content goes here.</p>
<br />
<button id="remove_overlay">Remove Overlay</button>
</div>
</body>
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('<div id="overlay"> </div>');
// 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/
【讨论】：
我认为最好的方法是有一个“封面” div，它会在加载时覆盖整个页面。它将是不透明的，并且会包含您的 GIF。
页面加载后，以下内容将隐藏 div：
$(document).ready(function() {
// Hide the 'cover' div
});
以下将使 div 成为页面的大小：
.div{
height:100%;
width:100%;
overflow:hidden;
}
【讨论】：
首先你是指body标签之间的所有内容吗？做旋转礼物的最好方法是添加一个类，将 gif 定义为不重复和居中。当页面准备好显示时删除类。
$('body').addClass('loading')
$('body').removeClass('loading')
这始终是最好的技术，因为如果您提交一些内容，然后尝试通过 DOM 添加添加 gif，一些浏览器不会这样做，因为页面已提交。
【讨论】：