Я отображаю представление с несколькими полноразмерными (768x1024) изображениями в веб-приложении iPad.Изображения находятся внутри отдельных элементов, плавающих рядом друг с другом.Эти изображения предварительно загружены.
Переход между изображениями осуществляется с помощью -webkit-transform: translate3d (), который должен быть наиболее эффективным способом оценки производительности.Переход сделан для всего элемента тела.Но я не могу сказать, выполняется ли рендеринг с помощью прокрутки при копировании, прокрутки плитки или полной перерисовки.
Однако при перелистывании между изображениями рендеринг нового изображения не работает полностью - правая сторонаизображение (последние ~ 20%) мерцает.Это происходит только тогда, когда изображение отображается в первый раз, после этого проблем не возникает.
Что я уже пробовал:
- как полноразмерные изображения (~ 200 КБ каждое), так иLo-Res (~ 30 КБ каждый) в качестве фоновых изображений
- , как указано выше, но в качестве элементов img
- маленькие миниатюрные изображения растянуты как полноразмерные с background-size: cover (очень плохая производительность)
- одноцветные изображения.
- , показывающие весь контент за один раз, уменьшая его в единичном виде и затем масштабируя до 100%
Ни одно из этихРабота.Я также пытался обслуживать изображения с помощью автономного кэша приложения, но у меня нет такой проблемы, связанной с загрузкой изображений, но исключительно как с проблемой рендеринга.
Я также проверил, есть ли у меня CSSсвойства, которые могут повлиять на производительность (например, фильтры, проблемы позиционирования или переполнения).Не должно быть ничего, что могло бы повлечь за собой наказание.
На данный момент единственным рабочим решением будет отсутствие изображений вообще, так как нет проблем с рендерингом без изображений.И отображение изображений после завершения перехода.Это, однако, только второе (и последнее) решение.