Загрузите сайт, когда закончите работу

Question

Я создал div с именем моего веб-сайта. Когда вы входите на веб-сайт, вы видите имя, заполняемое (например, индикатор выполнения). Предполагается, что когда имя ПОЛНОСТЬЮ заполнено, div dissapears; но он исчезает, когда он не полностью заполнен. Более-менее в 50% ...

Не можете мне помочь?

** Вы можете проверить его в следующей ссылке: ** tapeHD

Вот код ...

Jquery код

$(document).ready(function() { 
    /* Loading */ 
    $(window).load(function() { $('body').addClass('loading'); }); 

    setTimeout(function() { 
     if($('body').hasClass('loading')) { 
      $('#loading').fadeOut(); 
      $('body').removeClass('loading'); 
      $('body').addClass('loaded'); 
     } 
    }, 2000); 

    if($.cookie('showOnlyOnce')){ 
     $('#loading').hide(); 
    } else { 
     $.cookie('showOnlyOnce', 'showOnlyOnce', { expires: 1 }); 
     $('#loading').show(); 
    } 
    /* END Loading */ 
}); 

CSS3 код

body.loading #loading .title2 span, 
body.loading #loading h1 .progress_bar_container .progress_bar { 
    width: 100%; 
} 

body.loaded #loading .title2 span, 
body.loaded #loading h1 .progress_bar_container .progress_bar { 
    width: 100%; 
} 

#loading { 
    background-color: #252328; 
    bottom: 0; 
    height: 100%; 
    left: 0; 
    margin: auto; 
    max-width: 100%; 
    position: fixed; 
    right: 0; 
    top: 0; 
    z-index: 999; 
} 

#loading .container { 
    bottom: 0; 
    height: 100%; 
    height: 100%; 
    left: 0; 
    margin: 0 auto; 
    max-width: 100%; 
    position: absolute; 
    right: 0; 
    text-align: center; 
    top: 0; 
    width: 29rem; 
} 

#loading h1 { 
    bottom: 0; 
    font-family: CaviarDreams_Bold; 
    font-size: 8.2rem; 
    height: 1.4em; 
    left: 0; 
    margin: auto 0; 
    position: absolute; 
    right: 0; 
    text-align: center; 
    top: 0; 
} 

#loading h1 span { 
    display: block; 
    left: 0; 
    line-height: normal; 
    position: absolute; 
    top: 0; 
} 

#loading h1 .progress_bar_container { 
    background-color: rgba(0, 0, 0, 0.8);  
    bottom: 0; 
    box-shadow: 2px 2px 3px rgba(255,255,255,0.1); 
    height: 7%; 
    left: 0; 
    margin: 0 auto; 
    position: absolute; 
    right: 0; 
    width: 36%; 
} 

#loading h1 .progress_bar_container .progress_bar { 
    background-color: #FFF; 
    display: inline-block; 
    height: 100%; 
    left: 0; 
    position: absolute; 
    top: 0; 
    width: 0%; 

    -webkit-transition: width 2s linear; 
     -moz-transition: width 2s linear; 
     -ms-transition: width 2s linear; 
     -o-transition: width 2s linear; 
      transition: width 2s linear; 
} 

#loading .title1 { 
    color: rgba(0, 0, 0, 0.8); 
    text-shadow: 2px 2px 3px rgba(255,255,255,0.1); 
} 

#loading .title2 { color: #FFF; } 

#loading .title2 span { 
    overflow: hidden; 
    width: 0%; 

    -webkit-transition: width 2s linear; 
     -moz-transition: width 2s linear; 
     -ms-transition: width 2s linear; 
     -o-transition: width 2s linear; 
      transition: width 2s linear; 
} 

В div установлен файл cookie. Он отображается только один раз в день. Чистые печенье, чтобы отобразить его каждый раз, когда вы входите на веб-сайте ...

---

Я попытался это с функцией живой

var progress = false; 

$(window).load(function() { $('body').addClass('loading'); }); 

if($('body').hasClass('loading')) { progress = true; } 

if(progress == true) { 
    $("body.loading #loading .tapeHDProgress").animate({ width: "100%" }, 2000, function() { 
     $('#loading').fadeOut(); 
     $('body').removeClass('loading'); 
     $('body').addClass('loaded'); 
    }); 
} 

Но это не работает

Answer 1

Хм мой первый догадка что ваш нынешний подход всегда будет ненадежным в этом отношении. Вот что я понимаю, что вы делаете:

• CSS настроен так, что загрузочная панель занимает 2 секунды, чтобы заполнить.
• Вы установили таймер Javascript для постепенного исчезновения загрузочного div через 2 секунды.
• Эти два процесса полностью не связаны друг с другом; вы рассчитываете на точность синхронизации браузера для их синхронизации.

Как и в любом продвинутом CSS-обмане, различные браузеры будут обрабатывать это по-другому, поэтому вы не можете ожидать последовательного опыта. Например, в Chrome эффект работает нормально (экран загрузки отображается в течение 2 секунд, затем исчезает по сигналу); в Firefox и Safari экран вообще не исчезает (вы можете проверить это, я на OSX Yosemite.)

Если вам действительно нужны два процесса для синхронизации, я бы использовал что-то например, JQuery .animate(), который позволяет указать анимацию и продолжительность, но также позволяет указать фрагмент кода JS, который должен быть выполнен , когда анимация завершается. Таким образом, вы не полагаетесь на два отдельных процесса, которые нужно синхронизировать; завершение загрузочной панели фактически триггеров затухание.