Javascript-форум - Видимость по-загрузке

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Видимость по-загрузке (https://javascript.ru/forum/dom-window/15784-vidimost-po-zagruzke.html)

Видимость по-загрузке

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

<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] слишком расходно!

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

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

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

table-layout:fixed;

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

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

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

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

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

<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...

Цитата:

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

на дворе XXI век

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

Цитата:

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

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

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