Javascript переходы на масштабированных изображениях CSS работают плохо - PullRequest
Новая
       3

Javascript переходы на масштабированных изображениях CSS работают плохо

0 голосов
/ 21 сентября 2010

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

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

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

Однако, если изображения не растягиваются, производительность большинства браузеров на большинстве компьютеров будет превосходной.

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

Есть идеи?

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

Вот код js: 

var adjustedNewWidth = Math.round((roundNumber( (newWidth / originalImage.width), 1)+0.1)*originalImage.width);

var adjustedNewHeight = Math.round((roundNumber( (newHeight / originalImage.height), 1)+0.1)*originalImage.height);
  • newWidth - желаемая ширина,
  • originalImage.width мой массив, где Я сохраняю оригинальные размеры изображения (Поскольку JS настолько умный, он не может получить доступ после масштабирования),
  • roundNumebr - это функция, которая масштабируется до ближайшего десятичного знака

function roundNumber(num, dec) { var result = Math.round(num*Math.pow(10,dec))/Math.pow(10,dec); return result; }

После этого затухание работает примерно на 50% лучше, но все еще не идеально. Спасибо за вашу помощь всем, надеюсь, это поможет кому-то там.

1 Ответ

0 голосов
/ 09 января 2012

Потеря производительности из-за того, как браузеры масштабируют и отображают информацию и изображения.

Попробуйте добавить следующее ко всему, что будет масштабироваться: 

-ms-interpolation-mode: nearest-neighbor;
image-rendering: optimizeSpeed;

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

После завершения анимации установите стили элемента на: 

-ms-interpolation-mode: bicubic;
image-rendering: optimizeQuality;

Также скрипт округления часто вызывает Math, когдаокругление, это довольно медленно, когда повторяется много раз (как в анимации).Вы можете сократить накладные расходы, заменив скрипт округления на более простую версию: 

var roundNumber = function (num) {
    return ~~(num + .5);
    //this take a number (num), adds .5, then chops off the decimal place. 
}
...