页面加载期间的 jquery 预加载器

Question

我有一个 OffDiv，里面有加载 gif，如下所示：

<div id="OffDivAndLoadingContainer">
    <div id="OffDiv">
    </div>
    <div id="LoadingContainer">
    </div>
</div>

及其 css：

div#OffDivAndLoadingContainer
{
    display: none;
    position: fixed;
    top: 0px;
    right: 0px;
    z-index: 90000;
    width: 100%;
    height: 100%;
    border: 3px solid green;
}
div#OffDiv
{
    width: 100%;
    height: 100%;
    padding: 0px;
    margin: 0px;
    background-color: Blue;
    filter: alpha(opacity=40); /* internet explorer */
    -khtml-opacity: 0.4; /* khtml, old safari */
    -moz-opacity: 0.4; /* mozilla, netscape */
    opacity: 0.4; /* fx, safari, opera */
    border: 1px solid back;
}
div#LoadingContainer
{
    background: transparent url('/Images/Loading_Telerik_Vista.gif') no-repeat scroll center center;
    position: absolute;
    top: 0px;
    right: 0px;
    width: 100%;
    height: 100%;
    padding: 0px;
    margin: 0px;
    border: 1px solid red;
}

我设置了该 OffDiv 的宽度和高度，如下所示：

function OffDivAndLoadingContainerOn() {
    var x = screen.availWidth;
    //alert(x);
    $('div#OffDivAndLoadingContainer').css({ 'width': x });
    //alert($('div#OffDivAndLoadingContainer').css('width'));
    var y = screen.availHeight;
    //alert(y);
    $('div#OffDivAndLoadingContainer').css({ 'height': y });
    //alert($('div#OffDivAndLoadingContainer').css('height'));

    //alert('On');
    $('div#OffDivAndLoadingContainer').css({ 'display': 'block' });
}

我想在页面加载开始时向下滑动该 OffDiv，并在页面完全加载时隐藏它！
Q#1：我应该使用哪个 jquery CROSS BROWSER 插件来实现此目的？
Q#2：解决 Q#1 后，我真的想了解百分比预加载器（进度条）在页面加载期间如何工作（我认为使用 jquery 插件更好）？您能给我展示一些演示示例吗？

提前致谢

Answer 1

您需要在 CSS 中显示所有 div，而不是使用上面的代码。

div#OffDivAndLoadingContainer
{
    display: block; /* or just remove this line completely */
    /* the rest of the style */
}

页面加载后，隐藏 div。 （确保您正在加载 jQuery）

$(function() {
    $('div#OffDiv').slideDown(function() {
       $(this).hide();
    });
});

这将达到您想要的效果。

建议

这种效果可能会惹恼人们，因为页面加载速度太快，以至于他们必须等待 div 消失。 但是这是一次很好的学习经历。这是另一个效果。而不是删除一个正在加载的div。您认为您可以透露正在加载的页面部分吗？就像谷歌的简单搜索屏幕或苹果的主页所做的那样。

祝你好运。