Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Отрисовка элемента до body (https://javascript.ru/forum/dom-window/23263-otrisovka-ehlementa-do-body.html)

belkir 18.11.2011 08:35

Отрисовка элемента до body
 
Всем привет! Возник следующий вопрос:

Делаю слой "загрузки" страницы. Т.е. пока страница грузится - висит див на всю страницу на верхнем слое и не даёт клацать юзерам по незагрузившейся странице. Как выяснил в инете: отрисовывать его надо сразу как открывается body и скрывать перед его закрытием. Но вот в чём проблема: моя библиотека подключается в <head>, а к этому моменту времени body ещё не существует при загрузке страницы. Скрыть я легко могу див, повесив обработчик на window.onload а вот как его корректно отрисовать без вставки вызова функции непосредственно в сам html??? Посоветуйте пож-та способы решиние этой траблы. Спасибо.

ksa 18.11.2011 08:49

Цитата:

Сообщение от belkir
как его корректно отрисовать без вставки вызова функции непосредственно в сам html?

Так и "отрисуй"...

<body onload='shadowOff()'>
<div id='shadow'></div>
...


А в ЦСС укажи shadow все нужные свойства

belkir 18.11.2011 09:59

блин, читайте пож-та внимательнее!

Цитата:

Сообщение от belkir
отрисовать без вставки вызова функции непосредственно в сам html


ksa 18.11.2011 10:04

Цитата:

Сообщение от belkir
блин, читайте пож-та внимательнее!

Ой, ой, ой... Ну прости бестолкового... :cray:
Только как понять те слова правильно?

belkir 18.11.2011 10:15

библиотека подключается в HEAD больше в html-файле ничего нет. Т.е. все действия должна производить библиотека сама. Мы даже не можем дописать в body тэг div. Его можно вствать через document.createElement(); но как его отрисовать, если ко времени подключения библиотеки тэга body на странице ещё нет! (он ещё не догрузился)

ksa 18.11.2011 11:01

belkir, уже лучше... :)
Как вариант...

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
</style>
<script type="text/javascript">
$(document).ready(function(){
	var val='<p>Test...</p>'
	$(document.body).append(val);
});
$(window).load(function(){
	alert('Страница загружена');
});
</script>
</head>
<body>
</body>
</html>

da_ff 18.11.2011 13:31

Зачем вообще вставлять div? Cкройте контент (css) и покажите лоадер на body опять же css'ом.

belkir 18.11.2011 15:24

Цитата:

Сообщение от da_ff (Сообщение 137396)
Зачем вообще вставлять div? Cкройте контент (css) и покажите лоадер на body опять же css'ом.

ок. Пример в студию!

belkir 18.11.2011 15:32

Цитата:

Сообщение от ksa (Сообщение 137369)
belkir, уже лучше... :)
Как вариант...

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
</style>
<script type="text/javascript">
$(document).ready(function(){
	var val='<p>Test...</p>'
	$(document.body).append(val);
});
$(window).load(function(){
	alert('Страница загружена');
});
</script>
</head>
<body>
</body>
</html>

А как быть без JQuery???

ksa 18.11.2011 15:36

Цитата:

Сообщение от belkir
А как быть без JQuery?

1000р...

da_ff 18.11.2011 16:08

Cобытие ready будет вызвано после формирования всего дерева документа, а не после открытия body.

belkir 18.11.2011 16:44

Цитата:

Сообщение от ksa (Сообщение 137414)
1000р...

барыга

ksa 18.11.2011 19:21

belkir - неуч и халявщик. :haha:

da_ff 21.11.2011 11:26

Цитата:

ок. Пример в студию!
Покажите картинку как оно должно выглядеть?
В общих чертах это
body.loading{background:url(loading.gif) center center no-repeat;}
body.loading > *{visibility:hidden;}

Либо вам скорее подойдет наоборот,
body{background:url(loading.gif) center center no-repeat;}
body *{visibility:hidden;}
body.complete{background:none;}
body.complete > *{visibility:auto;}

после подгрузки DOM повесить на body класс complete.

Андрей38 22.11.2011 19:30

Здравствуйте.
У меня после танцев с аппендом в связке с риплейсом дом показывает /стрекоза в Опере (ВэбДиволопер ее)/
<div class="R Par_zoom_0" style="left: -107px; top: -85px">
<p/>
<li>tre</li>
<div>tre</div>
<img src="vboe.jpg" zoom="Z" class="zoom_0"/>
<p/>
</div>
А задумка была <p><img src="vboe.jpg" zoom="Z" class="zoom_0"/><p/>

Переиначить не знаю как и устал играться .Там Ич напрашиваеться .Но и так работает как мне надо.Любой браузер скушает такое или могут быть проблемы?
Да,врап там не работает

ksa 23.11.2011 10:55

Андрей38, пора уже научиться делать нормальные тестовые примеры. Тебе их делали предостаточно...

Андрей38 23.11.2011 11:42

Все.Вас понял,Гуру

Андрей38 23.11.2011 14:09

....А задумка была <p><img src="vboe.jpg" zoom="Z" class="zoom_0"/><p/>
ВСЕМ в помощь! ВНИМАНИЕ!!!!!!!!
НЕЛЬЗЯ НИЧЕГО обертвать в тег <p> !!!!!!!!!!!!!!!!!!!!!!!!!Ни скриптом,ни в ШТМЛ!!!!!!!!!!!
пусть хотя бы даже в span но не в <p> !!!!!!!!!!!!!!!!!!!!!!!!!

ksa 23.11.2011 14:16

Цитата:

Сообщение от Андрей38
НЕЛЬЗЯ НИЧЕГО обертвать в тег <p>

И чем же тот <p> провинился? :blink:

ksa 23.11.2011 14:26

Бивас, тест!

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
</style>
<script type="text/javascript">
$(document).ready(function (){
	$(':button').click(function (){
		$("img").wrap(document.createElement("p"));
	});
});
</script>
</head>
<body>
<img src='http://javascript.ru/forum/images/smilies/smile.gif' />
<img src='http://javascript.ru/forum/images/smilies/wink.gif' />
<input type='button' value='Go' />
</body>
</html>


Андрей38, где криминал?

Андрей38 24.11.2011 13:10

Здравствуйте КСА!
Я не знаю как этот криэйт элемент ведет себя.(я делаю просто $('<div>xxxx</div>).appendTo('body .D'))
Но вот ,штмл
<div><li></li><p><img src="vboe.jpg" zoom="Z" class="zoom_0"/><p/></div>
сохраняем-открываем в диволопере /Мозилл /(стрекоза_Опера)
и видим разрушеный дом,какой так усердно строили
<div><li></li><p></p><img src="vboe.jpg" zoom="Z" class="zoom_0"/><p><p/></div>
3 ЦЕЛЫХ дня убил ,пока это выявил.Теперь- все как надо!

ksa 24.11.2011 13:19

Цитата:

Сообщение от Андрей38
Покажите пожайлуста пример на алерте который достает че нибудь из штмл*я прямо в сообщении поста

А чем тебе мой пример, смотри выше, не угодил? :)

ksa 24.11.2011 13:23

Цитата:

Сообщение от Андрей38
Но вот ,штмл
<div><li></li>...</div>

Это уже полный фуфел... :nono:

- Так конь не ходт... (с) 12 стульев

Андрей38 24.11.2011 13:31

Цитата:

Сообщение от ksa (Сообщение 138720)
А чем тебе мой пример, смотри выше, не угодил? :)

Ой.КСА! Спасибо! Это по инерции я спросил.Я уже понял,и посмотрел -это штмл ран!
...О теге .вставил Ваш пример в Дримвивер,открыл в Моз Диволопере,посмотрел..
Ну,КСА!...Вы Гуру над всеми Гуру!!! Все как надо !
Результат
<html><head>

</head>
<body>
<p><img src="http://javascript.ru/forum/images/smilies/smile.gif"></p>
<p><img src="http://javascript.ru/forum/images/smilies/wink.gif"></p>
</body> </штмл>
Спасибо! Но любой как я_такое бы не знал как сделать и почему збоит .
Спасибо :yes: !
Мне этот врап(криейт елемент ххх) ОЧЕНЬ пригодиться!

Андрей38 24.11.2011 13:47

Цитата:

Сообщение от ksa (Сообщение 138721)
Это уже полный фуфел... :nono:

- Так конь не ходт... (с) 12 стульев

штмл
<div><li></li>...</div>
Понял.Ли нужен его родной ЮЛ или ОЛ ,чтоб было нормально ?

ksa 24.11.2011 13:58

Андрей38, у списка своя структура...

<ul>
   <li>...</li>
   ...
   <li>...</li>
</ul>
<!-- или -->
<ol>
   <li>..</li>
   ...
   <li>...</li>
</ol>

Андрей38 24.11.2011 14:17

Цитата:

Сообщение от ksa (Сообщение 138736)
Андрей38, у списка своя структура...

<ul>
   <li>...</li>
   ...
   <li>...</li>
</ul>
<!-- или -->
<ol>
   <li>..</li>
   ...
   <li>...</li>
</ol>

Спасибо! А то я тягал теги как и куда попало...
..После этого случая с ЛИ/Р ,чтоб заработал скрипт , я обернул имидж
тегом взятым из головы и заработало.
И поэтому хочу спросить,можна ли свободно оборачивать,вставлять в дом несуществующие(-ми) в природе теги(-ми)?(а то если много див - то путаешся ,много парентов , eq() и тд)

ksa 24.11.2011 15:12

Цитата:

Сообщение от Андрей38
можна ли свободно оборачивать,вставлять в дом несуществующие(-ми) в природе теги(-ми)?

:blink:

Цитата:

Сообщение от Андрей38
а то если много див - то путаешся

Я х/з чего ты там наворотил такого... :lol:

Но думаю до ЦМСок, а тем паче до ZENа тебе ох как далеко до огромного сгенерёного контента...

Но в любом случае, только тренировка и советы знающих людей помогут таки не путаться в тегах.

Андрей38 24.11.2011 19:45

спасибо,профессор


Часовой пояс GMT +3, время: 20:00.