Уменьшение изображения CSS

Я собираю перелистывание книги, в котором переворачиваю страницы с помощью CSS, JavaScript и HTML. Он работает очень хорошо, за исключением одного момента.

Каждое изображение имеет родителя на уровне блока. Размеры родителя на уровне блока имеют то же соотношение, что и изображение, но оно уменьшено, чтобы соответствовать размеру окна. Каждое изображение имеет ширину: 100%; и высота: 100%; объявление, что делает его помещающимся непосредственно внутри его родительского уровня на уровне блока.

Теперь это прекрасно работает, но когда я начинаю скользить по страницам, анимация ОЧЕНЬ медленная и тормозит, потому что я уменьшаю изображения. Если я удалю объявление ширины и высоты из изображений, анимация будет работать гладко, но изображения превысят размеры родительского блока на уровне блоков.

Что я могу сделать, чтобы исправить это? Создание нового изображения с новыми размерами не вариант, так как я хочу, чтобы изображения соответствовали каждому разрешению экрана.

Анимация медленная только в следующих браузерах/ОС: Opera 10, Mac Chrome 6, Mac Firefox 3, Windows

Safari 5 и Firefox 3 на Mac и IE7 на Windows очень хорошо обрабатывают анимацию, но есть некоторые браузеры, в которых производительность снижается при уменьшении изображения.


google-chrome css safari firefox opera
person John    schedule 13.09.2010    source источник
comment
Я не уверен, что полностью понимаю, но это медленная загрузка изображения или анимация?   -  person hookedonwinter    schedule 14.09.2010
comment
Это сама анимация. При переходе с одной страницы на другую в некоторых браузерах это происходит очень медленно, если изображения уменьшены.   -  person John    schedule 14.09.2010
comment
Если вы можете использовать обработку на стороне сервера, вы можете масштабировать индивидуальные изображения для каждого пользователя, но я так понимаю, это невозможно для вашего приложения?   -  person Gus    schedule 14.09.2010
comment
Это определенно вариант, но мы генерируем более 100 000 просмотров страниц каждый день. Для этого потребуется много вычислительной мощности. Кроме того, если пользователь изменяет размер окна, необходимо создавать новые изображения.   -  person John    schedule 14.09.2010
comment
Я также попытался удалить изображение и установить его атрибут src в качестве фонового изображения для родителя на уровне блока. Затем я использовал -{vendor}-background-size, чтобы фоновое изображение поместилось внутри блока, но это было одинаково медленно.   -  person John    schedule 14.09.2010
comment
Кто-нибудь знает, как я могу это исправить?   -  person John    schedule 14.09.2010

Ответы (2)


arrow_upward
0
arrow_downward

Я не уверен, сработает ли это в вашем случае использования, но пробовали ли вы установить изображения/блоки на display: absolute или display: fixed?

Поскольку абсолютные и фиксированные элементы не участвуют в потоке, они не вызывают перекомпоновки при изменении их свойств, так что это может значительно ускорить процесс, в зависимости от обстоятельств.

Можем ли мы увидеть небольшой код или, может быть, живой пример?

person Pauan    schedule 01.10.2010

arrow_upward
0
arrow_downward

Некоторые браузеры очень медленно масштабируют изображения. По моему опыту, Chrome 8 является худшим в этом отношении, он примерно в 5 раз медленнее, чем FF3.6, при изменении размера больших изображений.

Вы можете использовать Canvas в качестве обходного пути в браузерах, которые его поддерживают. Это не быстрее при фактическом масштабировании (пока), но позволяет вам гарантировать, что вы масштабируете изображения только один раз, когда они загружены, а не снова и снова во время рендеринга.

person Glenn Maynard    schedule 11.12.2010