#php #jquery #html #css #internet-explorer
#php #jquery #HTML #css #internet-explorer
Вопрос:
Ребята, у вас есть несколько советов, как ускорить отображение любой большой таблицы с более чем 500 строками в Internet Explorer?
Вот как я это делаю прямо сейчас:
Результат запроса MySQL возвращает более 500 строк, поэтому я использую цикл to a while со следующим для отображения всех строк:
echo "<tr class='someMainClass' bgcolor='".$someBgColor."'>";
echo "<td width='10px' style='display: none;' class='someClass'>String</td>";
echo "<td class='someClassAgain andOtherClass' title='someTitle' >String again</td>";
echo "<td width='100px' class='ClassAgain' id='>another string</td>";
echo "<td width='100px' class='ClassAgain' title='title'><input type='text' value='and i input'/></td>";
echo "</tr>";
Когда список завершен, IE просто зависает на пару секунд, а затем появляется список. В дополнение к этому любой эффект наведения на <tr> работает очень медленно.
Я не уверен, почему это замедление вызвано в IE, поскольку все другие браузеры работают безупречно.
Буду признателен за любую помощь.
Комментарии:
1. IE отстой, вероятно, это и является причиной вашей проблемы.
2. да, вы совершенно правы
3. Что вы делаете с более чем 500 строками, из-за чего этот вопрос помечен jQuery? Есть ли скрипт jQuery для показа? Также: какая версия IE?
4. Если серьезно, то почти любая анимация, которую я делаю в IE (даже если она не с 500 строками), в лучшем случае скачкообразна
5. Вероятно, вам все равно следует использовать разбивку на страницы, я не могу представить ни одной ситуации, когда кто-то хочет 500 результатов на одной странице.
Ответ №1:
Помните, что большинство пользователей IE не осознают, что их опыт оставляет желать лучшего, они привыкли к этому.
Лучшим способом может быть реализация разбивки на страницы либо на стороне сервера, либо с помощью javascript.
Ответ №2:
К сожалению, это будет проблемой с IE… Вам лучше как-нибудь изящно деградировать для IE. Может быть, просто показать первые 50 строк и реализовать разбивку на страницы.
Комментарии:
1. да, разбивка на страницы, возможно, решит проблему, но в таком случае я не могу этого сделать. Отредактирую сообщение с этим примечанием. Ty
Ответ №3:
Сохраните данные в объекте javascript, загрузите первые 20 (или сколько угодно других занимает страницу), дождитесь document.ready, а затем начните подключать остальные строки с помощью javascript. Вы могли бы даже подключать строки по мере прокрутки страницы.
Много работы, чтобы она хорошо выглядела в таком дерьмовом браузере.
Комментарии:
1. JavaScript работает еще медленнее в IE. Если вы заполняете таблицу с помощью JavaScript, это, вероятно, будет медленнее, чем статический HTML. Особенно, если вы заполняете ее «правильным способом», используя
document.createElement()вместо строк.
Ответ №4:
Рендеринг 500 строк на одной странице — плохая идея, независимо от того, какой браузер вы используете, даже если он может работать лучше в Safari, Firefox и Chrome по сравнению с IE. С точки зрения удобства использования это тоже ужасно.
Таким образом, лучшим подходом, вероятно, было бы переосмыслить решение и вместо этого ввести разбивку на страницы. Может быть, 50 строк на страницу? или что-то в этомроде.
Комментарии:
1. да, у меня есть несколько других списков, в которых всего 100 строк, IE отлично отображает, но тот, кто собирается использовать список, не сможет изменить страницу (нумерацию страниц), потому что всегда нужно просматривать все строки
Ответ №5:
Попробуйте ограничить разметку. Удалите все атрибуты width, style, id и т.д., Затем создайте скрипт для их заполнения после загрузки HTML. Откажитесь от стиля и ширины, используйте классы. Удалите лишние пробелы.
Ответ №6:
Вы можете использовать это, показывая только то, что вам нужно, при прокрутке ajax, что-то вроде этого здесь или даже этого здесь.
Но на самом деле IE просто ужасен. Такого количества HTML-кода достаточно для простого маленького браузера … если, конечно, это не мусор.
Ответ №7:
Известно, что псевдоселектор:hover для элементов, не являющихся привязкой, в некоторых случаях замедляет работу IE7 и IE8 *. Когда строгий doctype не используется, IE7 и IE8 будут игнорировать наведение курсора мыши на любой элемент, отличный от якорей. При использовании строгого doctype :наведение курсора мыши на не привязки может привести к снижению производительности.
Ответ №8:
Попробуйте использовать table-layout: fixed в вашем CSS:
С помощью этого (быстрого) алгоритма горизонтальное расположение таблицы не зависит от содержимого ячеек; это зависит только от ширины таблицы, ширины столбцов и границ или интервала между ячейками.
Это должно ускорить начальный рендеринг, но вам придется управлять размерами столбцов вручную. Для определения размера столбца таблицы обычно требуется полное сканирование таблицы, а затем некоторое согласование, если недостаточно места для размещения естественной ширины всех столбцов; использование фиксированного макета позволяет избежать сканирования и согласования, сразу статически устанавливая ширину, а затем заставляя все ячейки соответствовать, нравится им это или нет.