Форум

Paguo-86PK · #1 (**permalink**) 13.03.2011, 07:00

Загружаю страницу с малой скоростью и вижу, как таблицы загружаются медленно и с искажениями.
Решил спрятать все таблицы и отображать их только по-полной загрузке. Например:

<html><head><title>Smart Visibility</title></head>
<body>
<table style='visibility: hidden' onload='this.style.visibility="visible"'>
<tr><td>TEST</td><td>PROBE</td></tr>
</table></body>

Но здесь OnLoad-событие просто не срабатывает (проверял alert'ом). Переделал:

<html><head><title>Smart Visibility</title></head>
<table id='tbl' style='visibility: hidden'>
<tr><td>TEST</td><td>PROBE</td></tr>
<script>
document.getElementById("tbl").style.visibility="visible";
</script>
</table></body>

Сработ� �ло. Но пришлось добавить в тело таблицы идентификатор и целый скрипт! Как быть тогда?
Пользоваться getElementsByTagName("table")[getElementsByTagName("table").length - 1] слишком расходно!

Matre · #2 (**permalink**) 13.03.2011, 07:22

Вешайте onload на BODY.

Paguo-86PK · #3 (**permalink**) 13.03.2011, 23:20

Гы-ыыы...
В body - легко. Однако, когда страницы большие, это не практично.
С моей скоростью, например, раздражает, когда в сети выгуглишь форум например, а он грузится минуту-две, а тем временем на экране пусто, лишь килобайты бегут...

Aetae · #4 (**permalink**) 13.03.2011, 23:27

Используйте если возможно:

table-layout:fixed;

Не будут искажаться.

Paguo-86PK · #5 (**permalink**) 14.03.2011, 01:06

Тут дело посложнее...
Нужно вообще предотвратить какие-либо искажения. Иначе в таблице, скажем, когда сервер задремал, последние 2-3 элемента не загрузились, хотя таблица не искажена. Просто выглядит не полной.
Понимаю, это дело привычное, везде и всюду в сети такое.
Но на дворе XXI век вторая декада. Вот я и пробую использовать простые, но более эстетичные приёмы.
Надоели, понимаешь, картинки, отображаемые на 90-95% буквально! Без каких-то жалких пар графических строк. И т.д. и т.п.
Вот и с таблицами это заметил, и с формами, и т.д.

Aetae · #6 (**permalink**) 14.03.2011, 01:21

Ужс. Прова поменять никак, да?
Я уж лет 5 как с подобным не сталкивался....

Первый предложенный вами вариант самый лаконичный и правильный в данном случае.

Paguo-86PK · #7 (**permalink**) 14.03.2011, 01:53

Ага. Я его подправил

<html><head><title>Smart Visibility</title></head>
<table style='visibility: hidden'>
<tr><td>TEST</td><td>PROBE</td><td>TEST</td><td>PROBE</td><td>TEST</td><td>PROBE</td><td>TEST</td><td>PROBE</td><td>TEST</td></tr>
<tr><td>PROBE</td><td>TEST</td><td>PROBE</td><td>TEST</td><td>PROBE</td><td>TEST</td><td>PROBE</td><td>TEST</td><td>PROBE</td></tr>
<tr><td>TEST</td><td>PROBE</td><td>TEST</td><td>PROBE</td><td>TEST</td><td>PROBE</td><td>TEST</td><td>PROBE</td><td>TEST</td></tr>
<tr><td>PROBE</td><td>TEST</td><td>PROBE</td><td>TEST</td><td>PROBE</td><td>TEST</td><td>PROBE</td><td>TEST</td><td>PROBE</td></tr>
<script>
window.status += "#" + (document.getElementsByTagName("table").length - 1) + " ";
document.getElementsByTagName("table")[document.getElementsByTagName("table").length - 1].style.visibility="visible";
</script>
</table>
<table style='visibility: hidden'>
<tr><td>TEST</td><td>PROBE</td><td>TEST</td><td>PROBE</td><td>TEST</td><td>PROBE</td><td>TEST</td><td>PROBE</td><td>TEST</td></tr>
<tr><td>PROBE</td><td>TEST</td><td>PROBE</td><td>TEST</td><td>PROBE</td><td>TEST</td><td>PROBE</td><td>TEST</td><td>PROBE</td></tr>
<tr><td>TEST</td><td>PROBE</td><td>TEST</td><td>PROBE</td><td>TEST</td><td>PROBE</td><td>TEST</td><td>PROBE</td><td>TEST</td></tr>
<tr><td>PROBE</td><td>TEST</td><td>PROBE</td><td>TEST</td><td>PROBE</td><td>TEST</td><td>PROBE</td><td>TEST</td><td>PROBE</td></tr>
<script>
window.status += "#" + (document.getElementsByTagName("table").length - 1) + " ";
document.getElementsByTagName("table")[document.getElementsByTagName("table").length - 1].style.visibility="visible";
</script>
</table>
<table style='visibility: hidden'>
<tr><td>TEST</td><td>PROBE</td><td>TEST</td><td>PROBE</td><td>TEST</td><td>PROBE</td><td>TEST</td><td>PROBE</td><td>TEST</td></tr>
<tr><td>PROBE</td><td>TEST</td><td>PROBE</td><td>TEST</td><td>PROBE</td><td>TEST</td><td>PROBE</td><td>TEST</td><td>PROBE</td></tr>
<tr><td>TEST</td><td>PROBE</td><td>TEST</td><td>PROBE</td><td>TEST</td><td>PROBE</td><td>TEST</td><td>PROBE</td><td>TEST</td></tr>
<tr><td>PROBE</td><td>TEST</td><td>PROBE</td><td>TEST</td><td>PROBE</td><td>TEST</td><td>PROBE</td><td>TEST</td><td>PROBE</td></tr>
<script>
window.status += "#" + (document.getElementsByTagName("table").length - 1) + " ";
document.getElementsByTagName("table")[document.getElementsByTagName("table").length - 1].style.visibility="visible";
</script>
</table>
</body>

Вродь пашет и без указания Id...

FINoM · #8 (**permalink**) 14.03.2011, 02:54

Сообщение от Paguo-86PK

на дворе XXI век

А вы не знаете о ненавязчивом яваскрипте и переменных

yupee · #9 (**permalink**) 14.03.2011, 16:03

Сообщение от FINoM

А вы не знаете о ненавязчивом яваскрипте и переменных

А как можно в отдельном файле объяснить коду когда надо сработать, если документ еще не загрузился?
событие load подойдет,если файл перед body загрузить?

Форум

Справочник

Discord чат

Курсы javascript