Прорисовка HTML страницы в IE при загрузке
У меня стояла задача, сделать прорисовку в IE постепенной, как это делается в FF3. Т.е. в ФФ прорисовка страницы производилась кусочками загруженного кода, т.е. сначала появится шапка, потом меню, потом часть контента и так раз 10, потом футер и страница загружена. В IE этот процесс был весьма другой, появлялся белый экран, появлялись первые в коде отрисовки таблиц, потом страница висит в таком состоянии, и после полной загрузки — отображалась полностью.
Для кого-то такой вариант (как и для меня) очень приятный, мы получаем через пару секунд готовую страницу, а не наблюдаем над тем как она утомительно грузится.
Мне поставили задачу избавиться от этого эффекта и сделать постепенную загрузку. Долго мучаясь пришли к выводу что такой эффект загрузки в IE вызван построением таблиц. Суть процесса отображения таблиц заключается в следующем:
пока не загрузятся закрывающие теги таблицы, (так как таблица состоит из TABLE, TBODY, TR, TD, а это 4 уровня вложености), содержимое включая саму таблицу не покажется на экране.
в моей ситуации страница состояла из:
1. HEADER (логотипы, инфа, меню)
2. контент часть (которая как раз тока целиком и отображалась, а длинной она примерно с 2 экрана вниз)
3. футер.
Контентная часть в свою очередь состояла из 3х колонок
1. левая широкая
2. разделитель 20 пикс
3. правая колонка 240 шириной.
<TABLE cellspacing="0" cellpadding="0" width="100%"> <TR> <TD valign="top"> ... </TD> <TD width="20"> </TD> <TD width="240" valign="top"> ... </TD> </TR> </TABLE>
Такой вариант пришлось переписать в вариант DIV Верстки (примеры можно найти в яндексе)
в таком варианте, сначала подгружался первй див, в нем начинали проявляться элементы, т.к. DIV У нас всего состоит из
В общем, для того чтобы видеть как грузиться страница, надо отдельные блоки верстать в виде блоков DIV или отдельных таблиц, которые не заключены в другие таблицы, чем меньше вложеность — тем быстрее загрузиться страницы.
Таблицы очень хороши, они четко и максимально правильно распределяют места страницы под нужные вам объекты — называются ячейками, но жертвуем нагрузкой на DOM модель браузера, DIV в свою очередь просты и легки для браузера, но жертвуем нервами по выравниванию и приданию нужного вида страницы.
Вот почитал весь блог почти, ну что-то подробно, что-то по диагонали.
И явно наблюдается склонность и любовь к таблицам :).
Я ничуть не осуждаю, т.к. это очередная холиварщина. Я считаю надо разумно совмещать.
Я не очень силен в PHP но может в ситуации описанной выше помогла бы функция flush(). Или вообще сделать три таблицы- хидер, контент и футер.
Или блоками хидер и футер , а контент таблицей.