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

Question

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

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

Итак:

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

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

Answer 1

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

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

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

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

• т.д.

Там много причины, чтобы иметь процесс сборки более продвинутый, чем просто «компилировать и пронестись все файлы».

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

Answer 2

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

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

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