hewlett (hewlett) wrote,
hewlett
hewlett

Category:

#4, Порядок загрузки элементов html-страницы


Иногда некоторые ресурсы имеют красивый, но одновременно и достаточно
“тяжеловесный” графический дизайн. Например, большая “шапка” страницы может
полностью подгружаться из 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 кода
страницы.

Tags: web
Subscribe
  • Post a new comment

    Error

    Anonymous comments are disabled in this journal

    default userpic

    Your reply will be screened

    Your IP address will be recorded 

  • 3 comments