Предварительный загрузчик jquery во время загрузки страницы

у меня есть 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 в начале загрузки страницы и скрывать его, когда страница полностью загружена!
Вопрос № 1: какой плагин jquery CROSS BROWSER я должен использовать для этой цели?
Вопрос № 2: после решения вопроса № 1 я действительно хочу узнать, как процентные предварительные загрузчики (индикаторы выполнения) работают во время загрузки страницы (я думаю, что с плагином jquery лучше)? не могли бы вы показать мне несколько примеров с демонстрационными примерами?

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


plugins jquery preloader pageload
person SilverLight    schedule 02.06.2011    source источник
comment
Так это для начальной загрузки страницы? Вы загружаете что-то очень большое, и вам нужно время для обработки?   -  person natedavisolds    schedule 03.06.2011
comment
привет @natedavisolds: Q1- да начальная загрузка страницы / Q2- я не думаю / я просто хочу сделать это для красоты / кроме того, я определяю ширину и высоту этого OffDiv с помощью jquery -> availWidth и availHeight ... чтобы OffDiv полностью заполнил мою страницу, и во время загрузки страницы вы могли видеть содержимое в конце OffDiv из-за его непрозрачности! Я РЕДАКТИРАЛ СВОЙ ВОПРОС!   -  person SilverLight    schedule 03.06.2011

Ответы (1)


arrow_upward
1
arrow_downward

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

Удачи.

person natedavisolds    schedule 03.06.2011