| |
|
|
| | Собственно, сабж. Как сверстать страницу так, чтобы браузер выдавал уже ее полностью, а не подгружал сначала текст, а потом картинки кусками? Что-то слышал про разницу между <div> и <table>, но, что называется, не знаю, с какого конца подобраться. | |
| |
|
|
| |
|
|
| |
для: aexb
(13.11.2007 в 10:07)
| | | блок и таблица соотвтственно
вещи разные | |
| |
|
|
| |
|
|
| |
для: bronenos
(13.11.2007 в 10:11)
| | | )))))))) я говорил о разнице загрузки данных, помещенных в див и таблицу. собственно, тут все помещено и в див, и в таблицу (иначе не получается под все браузеры подогнать). вот исходник страницы:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style>
body {background: #000000;}
div.body {width: 100%; height: 100%; text-align: center;}
img {margin: 6px; border: 1px solid; border-color: 666666}
img.grey {border: 1px solid #666666;}
img.white {border: 1px solid #CCCCCC;}
table {position: relative; top: 3%; border: 0;}
table td {vertical-align: top; color: #FFFFCC; padding: 0; margin: 0;}
span.name {font-family: Arial, Helvetica, Georgia; font-size: 30px;}
span.title {font-family: Arial, Helvetica, Georgia; font-size: 12px;}
span.phone {position: relative; left: -8px; top: 10px; font-family: Georgia, Times; font-size: 20px;}
div.inactive {display: none;}
div.active {display: block;}
</style>
<script>
var imageLargeCurrent = null;
var imageLargeNew = null;
var thumbCurrent = null;
var thumbNew = null;
function showlayer(layer) {
imageLargeNew=document.getElementById('ill-big-'+layer);
if (imageLargeNew != imageLargeCurrent) {
if(imageLargeCurrent) {
imageLargeCurrent.className = "inactive";
}
if(imageLargeNew) {
imageLargeNew.className = "active";
imageLargeCurrent = imageLargeNew;
}
}
}
function colorthumbborder(i) {document.getElementById('img-'+i).className="white";}
function uncolorthumbborder(i) {document.getElementById('img-'+i).className="grey";}
</script>
</head>
<body>
<div class="body">
<table cellspacing=0 cellpadding=0 border=0 align=center>
<tr>
<td>
<div style="position: relative; top: 0.4 em; left: 3px;">
<span class="name">Preved</span><br/>
<span class="title">Preved</span></br>
<span class="phone">(XXX) XX-XX-XX</span>
</div>
</td>
<td align=right>
<a href="i/big-1.jpg" onclick="showlayer('1'); return false;"><img onmouseover="colorthumbborder('1')" onmouseout="uncolorthumbborder('1')" id="img-1" class="grey" src="i/small-1.jpg"></a><a href="i/big-2.jpg" onclick="showlayer('2'); return false;"><img onmouseover="colorthumbborder('2')" onmouseout="uncolorthumbborder('2')" id="img-2" class="grey" src="i/small-2.jpg"></a><br/>
<a href="i/big-4.jpg" onclick="showlayer('4'); return false;"><img onmouseover="colorthumbborder('4')" onmouseout="uncolorthumbborder('4')" id="img-4" class="grey" src="i/small-4.jpg"></a><a href="i/big-5.jpg" onclick="showlayer('5'); return false;"><img onmouseover="colorthumbborder('5')" onmouseout="uncolorthumbborder('5')" id="img-5" class="grey" src="i/small-5.jpg"></a>
</td>
<td>
<a href="i/big-3.jpg" onclick="showlayer('3'); return false;"><img onmouseover="colorthumbborder('3')" onmouseout="uncolorthumbborder('3')" id="img-3" class="grey" src="i/small-3.jpg"></a><br/>
<a href="i/big-6.jpg" onclick="showlayer('6'); return false;"><img onmouseover="colorthumbborder('6')" onmouseout="uncolorthumbborder('6')" id="img-6" class="grey" src="i/small-6.jpg"></a>
</td>
</tr>
<tr>
<td colspan=2 style="width: 464px; text-align: right"><div id="ill-big-1" class="inactive"><img src="i/big-1.jpg"></div><div id="ill-big-2" class="inactive"><img src="i/big-2.jpg"></div><div id="ill-big-3" class="inactive"><img src="i/big-3.jpg"></div><div id="ill-big-4" class="inactive"><img src="i/big-4.jpg"></div><div id="ill-big-5" class="inactive"><img src="i/big-5.jpg"></div><div id="ill-big-6" class="inactive"><img src="i/big-6.jpg"></div></td>
<td> </td>
</tr>
</table>
</div>
</body>
</html>
|
Апд.: или как сделать, чтобы картинки грузились не кусками, а целиком каждая? | |
| |
|
|
| |
|
|
| |
для: aexb
(13.11.2007 в 10:07)
| | | Браузер, имея ОДНОВРЕМЕННО несколько объектов для загрузки (текст, картинки, что-то еще)
САМ определяет порядок загрузки этих объектов и начинает грузить их параллельно (или по какой-то
ИМ САМИМ выбранной очереди). Т.е. ЗДЕСЬ вы изменить ничего не в состоянии.
Вы вполне спокойно можете:
1. Или управлять ПОКАЗОМ после окончания загрузки.
Например, назначив телу документа свойство невидимости, кое меняется на значение "видимый"
только после окончательной загрузки всех объектов документа.
Див там будет, или таблица - не суть принципиально в этом случае.
2. Или убрать одновременность начала загрузки и самостоятельно установить порядок ее (в этом
случае в сумме время загрузки ВСЕГДА будет больше, чем если бы браузер делал это
самостоятельно).
Например, прописать все картинки (кроме одной) в html-коде без указания SRC, но для каждой
картинки указать инструкцию для события ONLOAD, по которой окончание загрузки первой картинки
вызовет функцию прописывания SRC у второй картинки; окончание загрузки второй картинки -
пропишет SRC у третьей и т.д.
3. Или совместить два первых способа - показать сразу что-то одно, а потом остальное по какой-то
очредности подгружать. | |
| |
|
|
