Есть ли проблема с использованием очень больших смещений фоновых позиций?
-
27-10-2019 - |
Вопрос
Я строю контроль над баром прогресса, и я работаю над тем, где он на самом деле не показывает прогресс, а просто вращающегося индикатора «что -то происходит». Дизайн, который у меня есть для этого, в основном чередуются диагональные полосы, по сути, парикмахерский полюс, как это, но «вращение»:
В надежде разгрузить как можно больше, чтобы рендеринг -двигатель я хочу использовать CSS -переходы для этого. Поддержка старых браузеров не является проблемой для меня.
Итак, моя первая идея заключалась в том, чтобы в основном сделать это:
.barber-pole {
background-image: url(repeating-slice.png);
/* set a very long (one hour!) transition on the background-position */
transition: background-position 3600s linear 0s;
}
... А потом, когда он попадает на экран, используйте JavaScript, чтобы по существу сделать это:
myBarberPole.style.backgroundPosition = '-1000000px 0';
Есть ли проблемы с производительностью:
- Переход на это долго
- Имея
background-position: -1000000px 0
?
В качестве альтернативы, есть ли у вас лучшее решение?
Решение
Я не думаю, что могут быть какие -либо проблемы с производительностью. Это не потому, что вы используете большой числа, которые они используют больше процессора или памяти.
Другие советы
В отсутствие «цепочек» переходов на себя (насколько я знаю, нет никакого способа сказать, когда переход закончится), это может быть хорошим решением, но, как говорит Джастин, это требует огромного изображения! Есть ли какие-либо проблемы с использованием хорошего старомодного анимированного GIF?