Прелоадер на JavaScript
Добрый день!
Необходимо реализовать прелоадер на страничке в виде картинки GIF. Т.е. как страница загрузилась, то картинка пропадает и, тадам!, появляется целевая страница. Вопрос: как реализовать данное чудо? Посмотрел в инете варианты, но они прям замороченные какие-то :blink: Только начал изучать JS, поэтому буду благодарен за подробные пояснения! |
Все просто. Делаешь так чтобы изначально отображалась гифка. и был скрыт див-контейнер. Далее в body идет подключение стилей/скриптов (вот кстати не знаю, по спецификаци стили должны подключаться в <head>, но тогда они блокируют отображение страницы до их загрузки), и уже перед </body> скриптом (можно и стилями, в зависимости от твоей политики в отношении <noscript>) скрываешь гифку и отображаешь див.
|
Пишу сразу после body код:
function createDiv() {
var _body = document.getElementsByTagName('body') [0];
var _div = document.createElement('div');
_div.id = 'page-preloader'
_div.innerHTML = '<span class="spinner"></span>'
_body.appendChild(_div);
}
createDiv();
т.е. в самом начале скриптом создаю прелоадер, и при выключенном js он не сработает, что и требуется. Далее в недрах хитрой wordpress темы с помощью jquery по событию .ready прописываю скрыть прелоадер. И все бы хорошо, но в момент загрузки происходит скачок: сначала появляется недозагруженная страничка, и только потом вылезает прелоадер. Что не так делаю? Подскажите пожалуйста. |
Тупо вставить картинку в начало страницы
<!DOCTYPE>
<html>
<head>
</head>
<body>
<img id="preload" src="http://uploads.ru/i/F/h/l/FhlpJ.gif" style="z-index:1000;display:none;opacity:0.8; position:fixed;width:100%;height:100%">
<script>
(function () {var elem = document.getElementById('preload');
elem.style.display='block';
window.onload = function () {elem.style.display='none';}
}());
</script>
<!-- Основной контент -->
<br />
<br />
<iframe src="http://russki.istockphoto.com/search/text/DIY+Картина+Пол+Молодая%20Пара/filetype/photos/editorial/0/findSimilar/true#ace2898" width=100%></iframe>
</body>
</html>
</script>
|
1.) Скрывает контент с помощью стилей (display: none);
2.) При загрузки документа, удаляем *gif анимацию и показываем контент.
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style type="text/css">
#loading {
bottom: 0%;
left: 0%;
margin: auto;
position: fixed;
right: 0%;
top: 0%;
z-index: 2;
}
body > div#content {
display: none;
}
</style>
</head>
<body>
<img alt="" id="loading" src="loading.gif" />
<div id="content">
Content
</div>
<script type="text/javascript">
window.onload = function() {
document.body.removeChild(document.getElementById('loading'));
document.getElementById('content').style.display = 'block';
}
</script>
</body>
</html>
|
Неправильно. В стилях скрываем прелоадер. Скриптом его отображаем и скрываем контент. По окончанию загрузки удаляем прелоадер и отображаем контент.
|
| Часовой пояс GMT +3, время: 00:18. |