Как заставить изображения декодироваться при загрузке?

Я создаю сайт, который выполняет прокрутку параллакса с помощью requestAnimationFrame. Существует несколько разделов, каждый из которых имеет полноразмерное фоновое изображение и некоторые изображения среднего и первого плана. Мне удалось получить анимацию относительно плавно через requestAnimationFrame, но в анимации все еще есть редкие колебания.

Наблюдая хронологию Chrome в режиме Frame, я вижу, что процессы, вызывающие "jank", помечены как "Image Decode". Кроме того, jank не повторяется, как только анимация была завершена один раз.

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

Ответ 1

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

Ответ 2

Проблема может быть связана с прорисовкой изображений из/в представлении.

От http://creativejs.com/resources/requestanimationframe/

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

Также из проект W3C

ISSUE-4 Мы хотим разрешить элемент, который будет передан requestAnimationFrame, так что анимации, влияющие на данный элемент дросселируются или приостанавливаются, когда прокручивается вне поля зрения?

Убедитесь, что вы не запускаете цикл requestAnimationFrame для каждого события onscroll, поскольку это может вызвать проблемы. Это подробно описано в этом отдельном сообщении

Вопросы о рамочной анимации запроса