?

Log in

No account? Create an account
Потому что граната [entries|archive|friends|userinfo]
hewlett

[ website | My Website ]
[ userinfo | livejournal userinfo ]
[ archive | journal archive ]

#4, Порядок загрузки элементов html-страницы [Jan. 12th, 2007|01:10 pm]
hewlett
[Tags|]


Иногда некоторые ресурсы имеют красивый, но одновременно и достаточно
“тяжеловесный” графический дизайн. Например, большая “шапка” страницы может
полностью подгружаться из jpg файла. В этом случае очень вероятно, что при
первом просмотре содержимое данной страницы сайта отобразится намного раньше
незакешированной картинки заголовка. Данный порядок отображения может быть
довольно непривлекательным.


Чтобы избавиться от этого недостатка, можно использовать обычный механизм
обработки события OnLoad. Для этого нужно задать CSS стиль “display: none” для
контекста ‘B’, который будет выводиться только после загрузки первоначально
блока ‘A’. Как только будет загружен код ‘A’, с помощью JavaScript будет
перехвачено событие OnLoad для этого фрагмента и “включится” отображение блока
‘B’.


Обработчик OnLoad событий может иметь следующий
вид:

<script language=JavaScript>


<!--
var DHTML = (document.getElementById || document.all ||
document.layers);


function getObj(name) {
  if (document.getElementById) {
    
return document.getElementById(name).style;
  } else if (document.all)
{
    return document.all[name].style;
  } else if (document.layers)
{
    return document.layers[name];
  }
}

function
displayObject(name,flag) {
  if (!DHTML)
    return;
  var x =
getObj(name);
  x.display = (flag) ? 'block' : 'none' ;
}


//-->

</script>


Теперь
структуру фрагментов ‘A’ и ‘B’ схематично можно описать таким образом (добавлен
также элемент ‘C’, выводящий сообщение ‘Загрузка…’ до тех пор пока не включится
элемент ‘B’):


<ELEMENT id="Block_A"
onLoad="displayObject('Block_C', 0); displayObject('Block_B',
1);">


<div id="Block_C">Загрузка...</div>


<div id="Block_B" style="display: none;">


  ...Код фрагмента B...


</div>

Где в качестве
ELEMENT могут использоваться следующие варианты: APPLET, BODY,
EMBED, FRAME, FRAMESET, IFRAME, IMG, LINK, SCRIPT.
Очевидно, что таким
образом можно определить порядок загрузки любого количества фрагментов HTML кода
страницы.

LinkReply

Comments:
(Deleted comment)
[User Picture]From: hewlett
2007-01-12 09:25 am (UTC)
Я, как потребитель, вообще люблю белый фон, черный текст и синие ссылки :)

Но в одном из воплощений я веб-верстак по найму. Злодеи заказчики хотят что-то вот такое. Кстати, не при всех типах верстки удается добиться приоритетного отображения текста, увы. Поглядим. Сайт-эталон пока в дауне.
(Reply) (Parent) (Thread)
From: (Anonymous)
2010-03-09 09:30 am (UTC)
Спасибо. Нужно было что такое, но про любимый js забыл=)) Тока надо не забывать еще про то что js может быть отключен у юзера.........
(Reply) (Thread)
From: p219wnt
2013-02-17 08:39 am (UTC)
Local women looking for discreet affairs Go Here dld.bz/chwZN
(Reply) (Thread)