Есть ли проблема с использованием очень больших смещений фоновых позиций?

StackOverflow https://stackoverflow.com/questions/6344621

  •  27-10-2019
  •  | 
  •  

Вопрос

Я строю контроль над баром прогресса, и я работаю над тем, где он на самом деле не показывает прогресс, а просто вращающегося индикатора «что -то происходит». Дизайн, который у меня есть для этого, в основном чередуются диагональные полосы, по сути, парикмахерский полюс, как это, но «вращение»:

A barber pole progress bar

В надежде разгрузить как можно больше, чтобы рендеринг -двигатель я хочу использовать 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';

Есть ли проблемы с производительностью:

  1. Переход на это долго
  2. Имея background-position: -1000000px 0 ?

В качестве альтернативы, есть ли у вас лучшее решение?

Это было полезно?

Решение

Я не думаю, что могут быть какие -либо проблемы с производительностью. Это не потому, что вы используете большой числа, которые они используют больше процессора или памяти.

Другие советы

В отсутствие «цепочек» переходов на себя (насколько я знаю, нет никакого способа сказать, когда переход закончится), это может быть хорошим решением, но, как говорит Джастин, это требует огромного изображения! Есть ли какие-либо проблемы с использованием хорошего старомодного анимированного GIF?

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top