Gibt es ein Leistungsproblem bei der Verwendung von Offsets für sehr große Hintergrundpositionen?

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

  •  27-10-2019
  •  | 
  •  

Frage

Ich baue eine Fortschrittsbalkenkontrolle und arbeite an dem Fall, in dem es keinen Fortschritt zeigt, sondern nur einen Drehindikator für "etwas passiert". Das Design, das ich für es habe, sind grundsätzlich alternierende diagonale Streifen, im Wesentlichen ein Friseurstab, aber "Spinnen":

A barber pole progress bar

Mit der Hoffnung, so viel wie möglich in die Rendering -Engine zu laden, möchte ich dafür CSS -Übergänge verwenden. Die Unterstützung von alten Browsern ist für mich kein Problem.

Meine erste Idee war also im Grunde, dies zu tun:

.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;
}

... und dann, wenn es auf den Bildschirm gerendert wird, verwenden Sie JavaScript, um dies im Wesentlichen zu tun:

myBarberPole.style.backgroundPosition = '-1000000px 0';

Gibt es Leistungsprobleme zu:

  1. Übergang für so lange
  2. Haben background-position: -1000000px 0 ?

Haben Sie alternativ eine bessere Lösung?

War es hilfreich?

Lösung

Ich glaube nicht, dass es Leistungsprobleme geben könnte. Es liegt nicht daran, dass Sie verwenden groß Zahlen, die sie mehr CPU oder Speicher verwenden.

Andere Tipps

In Ermangelung von "Verkettung" -Vereitungen zu sich selbst (soweit ich weiß, gibt es keine reine CSS-Art zu sagen, wenn der Übergang beendet ist), könnte dies eine gute Lösung sein, aber wie Justin sagt, es erfordert ein massives Bild! Gibt es ein Problem mit der Verwendung eines guten altmodischen animierten GIF?

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top