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

Я хочу, чтобы slideDown, что OffDiv при запуске загрузки страницы и скрыть его, когда страница была полностью загружен!
Q # 1: какой jquery CROSS BROWSER плагин должен ли я использовать для этой цели?
Q # 2: после решения Q # 1 я действительно хочу узнать, как процентные предварительные загрузчики (индикаторы выполнения) работают во время загрузки страницы (я думаю, что с плагином jquery лучше)? Вы могли бы показать мне несколько примеров демонстраций?

заранее спасибо

Answer 1

Вы должны показать все ваши дивы в CSS, а не с вами код выше.

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. Как вы думаете, вы можете раскрыть те части страницы, которые вы загружаете? Подобно простому поисковому экрану Google, или на домашней странице Apple.

Удачи.