Почему Chrome такой медленный при загрузке многих (≈130) png-изображений? - PullRequest
6 голосов
/ 13 февраля 2012

Я создаю страницу / приложение, которое представляет широкий ассортимент продукции. В одном представлении содержится около 130 продуктов, каждый из которых представлен png-изображением, размер варьируется от 33 КБ до 150 КБ.

Модельный ряд можно прокручивать по горизонтали с помощью полосы прокрутки пользователя или пользовательского контроллера, а при наведении курсора на каждый продукт я использую som css-переходы, чтобы скрыть все продукты, кроме одного, и увеличить его.

Он работает идеально плавно в Safari и прилично Firefox, а также в Chrome, пока я веду обратный отсчет изображения. Но чем больше изображений я пытаюсь добавить, тем медленнее становятся прокрутка и переходы, пока с ним практически невозможно работать.

Это какая-то проблема cache.prom в chrome? Есть ли способ обойти это?

Я пытался предварительно загрузить изображения, но проблема не в времени загрузки изображения, а в его производительности, которая, кажется, останавливается из-за огромного количества изображений.

1 Ответ

2 голосов
/ 13 февраля 2012

Вы можете объединить все свои маленькие изображения в одно большое изображение и загрузить ТОЛЬКО большое изображение, так что вы делаете только ОДИН HTTP-запрос. Для отображения вы должны установить смещение (свойство background-position) каждого изображения, используя css.

Учебник

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...