建议

Question

我有一个OffDiv加载gif Inside Inside Below：

<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滑动到OffDiv，并在页面完全加载时隐藏它！
Q＃1：我应该使用哪个jquery CROSS BROWSER 插件？
问题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。你认为你可以揭示你正在加载的页面部分吗？就像Google的简单搜索屏幕或Apple的主页那样。

祝你好运。

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

1 个答案:

建议