| Издательский дом ООО "Гейм Лэнд" | СПЕЦВЫПУСК ЖУРНАЛА ХАКЕР #28, МАРТ 2003 г. |
TIPS OF WEB: грузим без динамы, динамим, чтобы не грузить!
Sevranty
Спецвыпуск Xakep, номер #028, стр. 028-114-1
(sevranty@deepdesign.ru, vsevolod.deepdesign.ru)
Привет, любитель халявных советов! Сегодня речь пойдет про DynamicHTML (DHTML). Он позволяет без перезагрузки страницы менять очень многое на ней. Зацени несколько типсов, как заюзать это замечательное свойство.
TIPSA 1. ОЖИДАНИЕ ЗАГРУЗКИ СТРАНИЦЫ
Для начала сделаем html-прелоадер. Пусть он нам показывает "Загрузка начата ...", пока на странице грузятся разные картинки.
<script language="JavaScript"><!--//
var layerRef="null", styleSwitch="null";
function init() {
if (navigator.appName == "Netscape") {
layerRef="document.layers";
styleSwitch="";
} else {
layerRef="document.all";
styleSwitch=".style";
}
}
function hideLayer(layerName) {
eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.visibility="hidden"');
}
function showLayer(layerName) {
eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.visibility="visible"');
}
//--></script>
Эти скрипты должны быть в хедере файла. Вставив их туда, нам нужно создать парочку дивов (div), в которых, соответственно, будет текст, который выводится при начале загрузки и при ее окончании.
Это первый блок:
<div id="loading">
Загрузка начата...
</div>
Это второй блок:
<div id="load">
Загрузка окончена...
</div>
Если все тяжелые картинки на странице будут во втором блоке, то, пока страница полностью не загрузится, пользователь их не увидит.
Далее опишем правильно эти дивы в CSS (каскадной таблице стилей). Вариантов много, например:
<style type="text/css">
<!--
#loading {}
#load {visibility: hidden;}
-->
</style>
Эта часть у нас теперь готова. Осталось немного: инициировать скрипты из боди на событие Onload.
<body onload="init();hideLayer('loading');showLayer('load');">
Теперь можешь набить свою хоумпагу кучей картинок и долго наблюдать мессагу о том, что "Загрузка начата...".
TIPSA 2. POP-UP ПРИВЕТСТВИЕ
Раз уж сделал прелоадер, то будь вежлив до конца - поприветствуй пользователя! Для этого сначала запроси его:
<script language="javascript">
{
var family = prompt("Фамилию, быстро!", "Кацман")
var name = prompt("Имя, сволочь!", "Изя")
}
</script>
Это надо сделать в хедере. После чего можно с чистой совестью выводить его инфу в любой части тела страницы. Для этого используй такой скрипт:
<script language="javascript">
{
document.write("Приветствую вас <b>" +family+ " " +name+ "</b>.");
document.write("<br>");
document.write("Добро пожаловать ко мне домой");
document.write("<br>");
document.write("<b>"+"И все такое"+"</b>");
document.write(" ...");
}
</script>
Кстати, не рекомендую вставлять этот скрипт в хедер. Мало ли что %-)!
TIPSA 3. УВЕЛИЧЕНИЕ КАРТИНОК
Это очень полезная штука. Рекомендую для поточной верстки и поточных фотогалерей. Также при больших объемах текста интересно очень получается. И делается просто.
<SCRIPT LANGUAGE="JavaScript"><!--//
function ReSize(img, filesmall, heightsmall, widthsmall, filebig, heightbig, widthbig) {
if (img.src.indexOf('_small') > 0) {
img.src=filebig;