Сократите время декодирования изображений для приложения Cordova iOS

В настоящее время я создаю приложение для iOS с Cordova, которое использует переходы анимации CSS3 для имитации вставки / вывода и всплывающей / выводящей навигации по страницам.

Проблема, с которой я сейчас сталкиваюсь, заключается в том, что после завершения анимации изображения мигают в течение доли мс (только на мобильных устройствах, не отображаются на рабочем столе). Все изображения хранятся локально. Наблюдая за временной шкалой, я обнаружил, что наибольшую нагрузку на производительность оказывает время декодирования изображения. Изображение размером 1020 пикселей загружается примерно за 24 мс. Если я уменьшу размер изображения до 320 пикселей, время декодирования сократится до 0,9 мс. Как я могу динамически изменять размер изображений в соответствии с целевым портом просмотра перед загрузкой DOM? Я просмотрел этот ответ, но нашел его немного сложным для моей ограниченные знания javascript.

Любые чаевые были бы очень признательны.

Даниэла


person Daniela    schedule 23.06.2014    source источник
comment
Привет, Даниэла, чтобы javascript обработал изображение, его еще нужно загрузить. Вам нужны предварительно обработанные изображения, уменьшенные до 320 пикселей.   -  person MIdhun Krishna    schedule 23.06.2014
comment
Спасибо, Мидхан. Можете ли вы порекомендовать какой-нибудь хороший источник, на который я мог бы взглянуть? Спасибо   -  person Daniela    schedule 23.06.2014
comment
Одно из решений - иметь несколько разрешений изображений, например image320.png image640.png, и использовать эти изображения в зависимости от разрешения с помощью медиа-запросы.   -  person MIdhun Krishna    schedule 24.06.2014
comment
Одно из решений - иметь несколько разрешений изображений, скажем image320.png image640.png, и использовать это для разных размеров порта просмотра или иметь базовое разрешение и использовать преобразование css масштабировать, чтобы подогнать его под область просмотра.   -  person MIdhun Krishna    schedule 24.06.2014