i have an OffDiv with Loading gif Inside Like Below :

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

and their 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开发者_如何学Python: 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;
}

i set width and height of that OffDiv Like Below :

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' });
}

i want to slideDown that OffDiv at starting of page load and hide it when the page has been completely loaded!

Q#1 : which jquery CROSS BROWSER plugin should i use for this purpose?

Q#2 : after solving the Q#1 i really want to learn how percentage preloaders (progress bars) work during page load(i think with jquery plugin is better)? would you plz show me some examples with demos?

thanks in advance

You'll need to display all of your divs in CSS and not with you code above.

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

Once the page loads, then hide the div. (make sure you are loading jQuery)

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

This will have the effect that you desire.

Suggestion

This effect may annoy people because the page will load so fast that they will have to wait of the div to go away. But it is a good learning experience. Here is another effect. Instead of removing a loading div. Do you think you could reveal the parts of the page that you are loading? Like Google's simple search screen did or Apple's homepage did.

Good luck.