Форум

keslo · #1 (**permalink**) 22.08.2013, 22:12

Добрый день!
Необходимо реализовать прелоадер на страничке в виде картинки GIF. Т.е. как страница загрузилась, то картинка пропадает и, тадам!, появляется целевая страница.

Вопрос: как реализовать данное чудо? Посмотрел в инете варианты, но они прям замороченные какие-то

Только начал изучать JS, поэтому буду благодарен за подробные пояснения!

danik.js · #2 (**permalink**) 22.08.2013, 22:58

Все просто. Делаешь так чтобы изначально отображалась гифка. и был скрыт див-контейнер. Далее в body идет подключение стилей/скриптов (вот кстати не знаю, по спецификаци стили должны подключаться в <head>, но тогда они блокируют отображение страницы до их загрузки), и уже перед </body> скриптом (можно и стилями, в зависимости от твоей политики в отношении <noscript>) скрываешь гифку и отображаешь див.

wolfeinstein · #3 (**permalink**) 20.09.2013, 16:42

Пишу сразу после 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 прописываю скрыть прелоадер.

И все бы хорошо, но в момент загрузки происходит скачок: сначала появляется недозагруженная страничка, и только потом вылезает прелоадер. Что не так делаю? Подскажите пожалуйста.

Deff · #4 (**permalink**) 20.09.2013, 23:08

Тупо вставить картинку в начало страницы

<!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>

ruslan_mart · #5 (**permalink**) 21.09.2013, 13:24

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>

danik.js · #6 (**permalink**) 21.09.2013, 16:47

Неправильно. В стилях скрываем прелоадер. Скриптом его отображаем и скрываем контент. По окончанию загрузки удаляем прелоадер и отображаем контент.

Форум

Справочник

Discord чат

Курсы javascript