Погонял на двух браузерах новую папку с 479 изображениями по 3,2Мбайт каждая:
Chrome 1) 1,2 мин. 2) 22 сек (открывает все кадры по мере загрузки)
FF: 1) 1,09 мин. 2) 12 сек (долго тормозит, потом показывает всё)
1 - первая загрузка, 2 - кешированная
Кстати, кешированная миниатюра учитывает время изменения оригинального файла и пересоздается, в случае необходимости. Список всех фото в папке строится по оригинальным фотографиям, а не по кешированным.
Сделал кеширование. Первое открытие папки из 291 кадра - 40 секунд. Второе 3-4 секунды. Лайтбокс открывает картинку с бОльшим разрешением. Кешированные миниатюры складываются в ту же папку в подкаталоги preview. Осталось добавить путешествие по структуре папок и инструменты типа: удалить, отметить, сжать в архив выделенные.
Добавил кеширование. Отдача страницы стала занимать ровно в 3 раза меньше времени, а загрузка процессоров не превышает обычную для подобной страницы (куча картинок размером по 50Кб). Сравнивал вручную.
Очень хороший пример без JS, Mear. У меня почти получилось его внедрить. И пришло понимание — а что, если действительно не «париться», и отдать JS синхронизацию ширины стобцов. Как тогда может выглядеть это решение?
Второй способ KeepYourMind — это претензия на решение. Думаю в остальных случаях, кроме моего, он подойдет большинству. А проблему с IE10 можно решить отдельно.
Проблема заключается в том, что не удается сохранить горизонтальную прокрутку в пределах оберточного DIV и размеров ячейки таблицы-контейнера. А таблица всегда разного размера и без горизонтальной прокрутки не обойтись.
Вполне понятна разница в уже предложенных вариантах. Не буду ходить вокруг да около и сразу покажу ради чего мой вопрос. Сейчас это работает так. Я пойму, если кому-то лень читать код, но постараюсь пояснить.
В данной верстке три фиксированные колонки таблицы, в первом столбце — структура БД, во втором — сплиттер (пока не рабочий), в третьем находится оберточный DIV для горизонтальной прокрутки, а в нем таблица, ради которой и задан мой вопрос.
Предложенные вами решения прекрасны и имеют право на жизнь, но мне, как не специалисту в тонкостях CSS, тяжело понять природу проблему, из-за которой ни одно решение не заработало. Поэтому прошу попробовать еще раз, уже на конкретном примере.
