2016-12-12 2 views
0

Вы когда-нибудь использовали hotmail.com. После входа в систему вы можете увидеть логотип Outlook и загрузочную панель, а когда закончите - исчезнет.Как запустить логотип на pageload

Я пытаюсь сделать то же самое.

$(document).ready(function(){ 
    $(".loadingDiv").show(); 
} 

.loadingDiv{ width:100%; height:100% } 

Но я не могу понять, когда нужно скрыть его, когда логотип полностью анимирован.

loadingDiv имеет gif, который показывает, что мой логотип сайта оживлен.

+0

* Spashscreens * (логотип) очень раздражает, как они делают это получить в пользователей способом в течение нескольких секунд, чтобы они не могли продолжить. Для этого покажите логотип в html, затем добавьте setTimeout, чтобы скрыть его. Экран * загрузки * используется так, как он будет там, пока приложение не будет готово, в этом случае покажите логотип в html, а затем используйте документ, готовый загрузить другие ресурсы (т. Е. Они не находятся в исходном html). –

+0

Это было очень полезно! Я должен сделать это, если пользователь щелкнет где-нибудь, что логотип исчезнет так же, как модальный твиттер bootstrap – Stan

ответ

0

Это будет работать для вас

var $preLoader = $(".main-loader"); 
 
$(window).load(function() { 
 
    $preLoader.fadeOut(""); // Animate loader off screen 
 
});
.main-loader { 
 
    position: fixed; 
 
    left: 0px; 
 
    top: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    z-index: 9999; 
 
    background: url(http://www.downgraf.com/wp-content/uploads/2014/09/01-progress.gif) center no-repeat white; 
 
    background-size:50px; 
 
}
<div class="main-loader"></div>

+0

Ах, спасибо большое: D – Stan

0

Вы можете использовать .load() метод:

$(window).load(function(){// waits for all assets to load then executes the callback. 
    $(".loadingDiv").remove(); 
}); 
0

У меня есть #loadingDiv в качестве первой страницы в многостраничном приложении, так что он открывается по умолчанию. Затем я запускаю следующий код:

setTimeout(function() { 
    $(':mobile-pagecontainer').pagecontainer('change', '#home', { changeHash: false }); 
}, 2000);