Czy istnieje ograniczenie częstotliwości modyfikowania obrazu tła elementu?

Question

// Repaints the progress bar's filled-in amount based on the % of time elapsed for current video. 
progressBar.change(function() { 
    var currentTime = $(this).val(); 
    var totalTime = parseInt($(this).prop('max'), 10); 

    // Don't divide by 0. 
    var fill = totalTime !== 0 ? currentTime/totalTime : 0; 

    // EDIT: Added this check, testing with it now. 
    if (fill < 0 || fill > 1) throw "Wow this really should not have been " + fill; 

    var backgroundImage = '-webkit-gradient(linear,left top, right top, from(#ccc), color-stop(' + fill + ',#ccc), color-stop(' + fill + ',rgba(0,0,0,0)), to(rgba(0,0,0,0)))'; 
    $(this).css('background-image', backgroundImage); 
}); 

Napełnianie paska postępu w czasie przy użyciu powyższego javascript do modyfikacji jego obrazu tła z gradientem.

Niezwykle przerywany - obraz w tle całkowicie zatrzymuje renderowanie. Umieściłem logowanie w całym kodzie i wszystko wydaje się być uruchamiane poprawnie. Nie dzielę przez 0, ani moje wypełnienie 0, ale obraz w tle przestaje się wyświetlać.

Jeśli ponownie załaduję element dom - zacznie działać ponownie! Zastanawiam się, czy robię coś naprawdę nie tak. Może nie mogę ustawić obrazu tła tak bez przerwy przez wiele godzin?

EDYCJA: Mam zamiar zrobić krótki filmik z rejestracją, aby podkreślić problem. Może mnie trochę odtworzyć.

• umieścić punkt przerwania do kodu i obserwowane wartości wypełnienia na wartość większą niż 0 i mniejszy niż 1. W tym przypadku jego wartość 0,6925

• Umieszczenie przerwania do kodu , włamanie do punktu, a następnie zezwolenie na wykonanie, aby kontynuować, powoduje ponowne pojawienie się paska postępu!

EDIT2: Oto film z nim dzieje: http://screencast.com/t/DvzBr06f

Answer 1

Nie ma limitu. Z jakiej przeglądarki korzystasz? Może być kilka problemów z pamięcią podręczną przeglądarki, więc staraj się nie zmieniać zbyt wiele. Oto test ułożyła, co działa dobrze, FIDDLE i kod:

CSS:

div { 
    height:25px; 
} 

HTML:

<div id="pg"></div> 

JS:

var counter = 0, 
    alpha = window.setInterval(function(){ 
     counter++; 
     if(counter > 60){ 
      window.clearInterval(alpha); 
     } else { 
      progressBar("#pg", counter); 
     } 
    }, 500), 
    progressBar = function (elem, val) { 
     var fill = val/60; 
     var backgroundImage = '-webkit-gradient(linear,left top, right top, from(#ccc), color-stop(' + fill + ',#ccc), color-stop(' + fill + ',rgba(0,0,0,0)), to(rgba(0,0,0,0)))'; 
     $(elem).css('background-image', backgroundImage); 
    }; 

Answer 2

Może można uniknąć zmieniając BG do granulacji z < 0,3%?

if (lastFill && (fill - lastFill) < 0.003) 
    return; // don't draw < 0.3% increments. 
// draw.. 
lastFill = fill; 

Mam nadzieję, że jeśli jest to kwestia zasobów, 300 razy byłoby wykonalne - gdzie 10 000 razy może nie.

Answer 3

Nie, nie ma ograniczenia. Możesz modyfikować obraz tak, jak chcesz, chociaż mogą występować problemy z pamięcią podręczną i zasobami, więc zachowaj wartość w granicach 10000.

Answer 4

Nie, o ile wiem, nie ma ograniczeń. I nie sądzę, żeby to miało jakikolwiek wpływ na cokolwiek.