JQuery прелоадер во время загрузки страницы - PullRequest
Новая
       4

JQuery прелоадер во время загрузки страницы

0 голосов
/ 03 июня 2011

У меня есть 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 лучше)? Не могли бы вы показать мне несколько примеров с демонстрациями?

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

1 Ответ

1 голос
/ 03 июня 2011

Вам нужно будет отобразить все ваши 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.

Удачи.

...