Как сделать так, чтобы таблица HTML отображалась постепенно - PullRequest
Новая
       9

Как сделать так, чтобы таблица HTML отображалась постепенно

1 голос
/ 21 февраля 2011

У меня есть CGI-программа старого стиля, которая генерирует большую таблицу HTML.Поскольку содержимое таблицы вычисляется медленно (хотя она и не такая уж и большая), я хотел бы печатать ее по одной строке за раз, и чтобы браузер отображал строки по мере их выборки.

Если вы выполняете поиск в Интернете, выВы увидите, что style = "table-layout: fixed" должен помочь некоторым браузерам сделать это, но, с другой стороны, Firefox может отображать пошагово даже без него.Мой тестовый браузер - Firefox 4.0b10 для Windows, но я не могу заставить его отображаться постепенно, используя простой пример ниже: 

<html>
  <head>
    <title>x</title>
  </head>
  <body>
    <table width="100%" style="table-layout: fixed" rows="4" cols="4">
      <col width="10%" />
      <col width="20%" />
      <col width="30%" />
      <col width="40%" />
      <tr><td width="10%">a</td><td width="20%">b</td><td width="30%">c</td><td width="40%">d</td></tr>
      <!-- flush output, one second pause... -->
      <tr><td width="10%">a</td><td width="20%">b</td><td width="30%">c</td><td width="40%">d</td></tr>
      <!-- flush output, one second pause... -->
      <tr><td width="10%">a</td><td width="20%">b</td><td width="30%">c</td><td width="40%">d</td></tr>
      <!-- flush output, one second pause... -->
      <tr><td width="10%">a</td><td width="20%">b</td><td width="30%">c</td><td width="40%">d</td></tr>
      <!-- flush output, one second pause... -->
    </table>
  </body>
</html>

Вместо этого страница пуста до конца загрузки, когда появляется вся таблица.Я пробовал различные способы сообщить браузеру размеры таблицы заранее, поэтому у него не должно возникнуть проблем с отображением его по мере поступления, но они не помогают.(Удаление подсказок также не помогает.)

Если я изменю свой CGI-скрипт, чтобы закрыть и перезапустить таблицу между каждой строкой, с дополнительным пустым абзацем между ними, то страница будет отображаться в браузере постепенно.,Это показывает, что данные поступают в браузер постепенно - только Firefox решает не отображать их.

По иронии судьбы, гораздо более сложные скрипты, создающие таблицы большего размера, похоже, делают то, что я хочу, показывая одну строку за раз какон загружается, но всякий раз, когда я пытаюсь сократить вывод до минимального теста, он не работает.Это заставляет меня подозревать, что движок рендеринга Firefox использует эвристику сложности.

Какая волшебная пыль мне нужно, чтобы браузер всегда отображал загруженную таблицу до сих пор?

Ответы [ 3 ]

1 голос
/ 25 апреля 2011

За что это стоит. Firefox, который я использую Firefox 3.6.16, не отображается до тех пор, пока страница не будет загружена, независимо от того, что загружается.

Вы можете искать настройки в about: config, но я не видел никакого решения для этого, Есть дополнения, которые помогут с отображением заполнителей. но они тоже не всегда работают.

Только что нашел

Прочтите ИЛИ попробуйте 

about:config   - in browse bar
select new
create integer
nglayout.initialpaint.delay
set value to 0

ура

0 голосов
/ 11 марта 2011

Хорошо, так как насчет отбрасывания рендеринга на стороне клиента, но выборки и замены рендеринга HTML на стороне сервера внутри заполнителя (и, следовательно, таблицы) несколько раз? На стороне сервера придется использовать фоновый поток и указывать дескриптор (например, GUID) в своем первоначальном ответе, который затем может использовать вызов AJAX для запроса таблицы. Сервер может ответить несколькими строками и указанием того, что это не сделано, предлагая клиенту повторить это до завершения.

Полагаю, это будет немного грязно, но, по крайней мере, позволит вам использовать ту же страницу для вашего отчета. Параметр строки запроса может указать странице, следует ли полностью выполнить рендеринг или создать скрипт для обратного вызова для получения данных.

0 голосов
/ 28 февраля 2011

Прежде всего, я бы сказал, что это редко - хороший дизайн пользовательского интерфейса для одновременной загрузки огромных объемов данных. В большинстве случаев лучше предлагать какую-то функцию поиска или, по крайней мере, функцию подкачки. Могут быть исключения, но люди просто не могут обрабатывать очень большие объемы информации, а приложения, обслуживающие намного больше данных, чем люди используют, не просто тратят впустую циклы, они плохо спроектированы. Представьте, если Google отображает первые 10000 просмотров по умолчанию или даже 1000. Большинство пользователей даже не смотрят дальше первых 5 или около того, и количество потраченной пропускной способности ...

Тем не менее, это, конечно, не ваша вина, если страница плохо оформлена. Или, может быть, но вам понадобится быстрое исправление, прежде чем вернуться, чтобы позже перепроектировать решение. :)

Один из способов сделать это - визуализация таблицы на стороне клиента, а не на сервере. Если на странице нет ничего более тяжелого, пользователю будет быстро предоставлен другой контент, и область, в которой будет отображаться таблица, может содержать анимированный GIF или аналогичный значок, указывающий, что программное обеспечение «работает». Вы можете использовать AJAX-вызов для извлечения данных для таблицы и изменения DOM в Javascript. Затем вы можете создать, например, 100 строк за раз и использовать window.setTimeout, чтобы позволить браузеру отображать обновленный DOM перед продолжением.

Хорошая статья, объясняющая модель отправки событий, может оказаться полезной, если вы решите пойти по этому пути:

http://dev.opera.com/articles/view/timing-and-synchronization-in-javascript/

...