CSS Spritesheets

Question

Я только начал использовать таблицы спрайтов CSS, чтобы значительно сократить количество запросов, которые пользователь делает на нашем веб-сервере (ранее я создавал страницу с 200 миниатюрами, каждая из которых была связана по отдельности, так что было только 200 запросов для тех и не было)Я не знал, что это была проблема, пока кто-то не сказал мне об этом)

Пройдя через w3schools, я понял, как его использовать, и скачал spritesheetpacker, чтобы помочь мне сделать spritesheet, а также дать мне размеры и смещения.

Теперь у меня очень длинный CSS-файл, и я не собираюсь добавлять в тег 200 HTML-элементов вручную.Есть ли другой способ справиться с этой ситуацией?Вот некоторые подробности:

Я знаком с javascript (хотя и не очень с JQuery)

У меня есть все размеры и смещения для изображений из упаковщика.

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

В настоящее время я отображаю изображение с помощью тега img и оборачиваю его якорями, где класс img - это просто имя файла изображения (так как оно такжев комплекте с выходом из упаковщика)

Answer 1

Вы можете сэкономить немного CSS, сгруппировав вещи с одинаковыми размерами, а затем просто кодируя фоновые изображения.

<a class="buttonA Image5"></a>

.buttonA {
   width:100px;
   height:30px;
   display:block;
}

.image5 {
   background-image:url(...);
   background-position:....
}

Если вы используете display:block на своих якорях, вы можете использовать CSS-фон и полностью исключить тег изображения.