Java веб-приложение: где / как автоматически установить ширину / высоту каждого изображения

Question

По нескольким причинам многие «руководства для веб-мастеров» (например, руководства и рекомендации для веб-мастеров Google и Yahoo!) Повторяют несколько раз, что лучше всегда ставить ширину и высота атрибут тега img .

Одна из наиболее очевидных причин заключается в том, что элементы на странице не будут «прыгать» в новое место после загрузки каждого изображения (всегда установка правильной ширины / высоты обязательно избавляет от этого поведения) , Есть и другие причины следовать этим рекомендациям / рекомендациям.

Итак:

• , если учесть, что это действительно хорошая практика
• если картинок много и они часто меняются
• если картинки не меняются между двумя .war повторного развертывания (то есть: нет картинки, добавленной пользователем)
• если мы не хотим вручную редактировать все эти атрибуты ширины / высоты

Как мы автоматически / программно обслуживаем HTML-страницы, где для каждого тега img их атрибут width / height правильно установлен в качестве рекомендации?

Answer 1

У нас есть более сложный процесс сборки, где оптимизируются все .jsp , .css , .html и т. Д.

• .css файлы с большим количеством включений сворачиваются в один файл (еще один важный, если вы занимаетесь оптимизацией веб-сайтов, просто используйте инструменты разработчика Chrome или YSlow! И проверьте разницу с и без .css рушится)

• .jsp и .html ширина и высота изображения всех файлов установлена ​​на время сборки

• изображениям присваиваются уникальные имена и они устанавливаются как кешируемые навсегда (в отличие от того, что GWT делает для создаваемого им JavaScript, где используются уникальные идентификаторы). В следующей сборке они получат новые уникальные имена и снова будут кешироваться навсегда.

• и т.д.

Существует много причин для того, чтобы процесс сборки был более продвинутым, чем просто "скомпилируйте и заархивируйте все ваши файлы" .

Чтобы ответить на ваш вопрос: мы делаем много сценариев оболочки Un x в процессе сборки. Мы обрабатываем файлы .jsp, .css, .html и т. Д., Используя некоторую мощность оболочки Un x. И я могу вам сказать, что людям будет очень трудно воспроизвести то, что мы делаем, не имея возможности объединить мощь всех этих блестящих команд оболочки:)

Answer 2

Когда веб-приложение запускается, мы рекурсивно сканируем всю развернутую .war, ища каждый файл изображения и определяя их ширину / высоту.

Мы сохраняем эту информацию в виде сопоставления на "file-to-width / height" карте. Позже, каждый раз, когда мы генерируем тег img , мы вызываем метод, который возвращает ширину / высоту этого изображения.

Единственный «недостаток» заключается в том, что поиск карты и генерация атрибутов ширины / высоты выполняются во время выполнения.