Esiste un limite alla frequenza con cui è possibile modificare l'immagine di sfondo di un elemento?

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

Sto riempiendo una barra di avanzamento nel tempo utilizzando il javascript sopra per modificare l'immagine di sfondo con una sfumatura.

Estremamente intermittente: l'immagine di sfondo interrompe completamente il rendering. Ho inserito la registrazione in questo codice e tutto sembra funzionare correttamente. Non sto dividendo per 0, né è il mio riempimento 0, ma l'immagine di sfondo smette di mostrare.

Se ricarico l'elemento dom, riprende a funzionare! Quindi, mi chiedo se sto facendo qualcosa di veramente sbagliato qui. Forse non riesco a impostare l'immagine di sfondo in modo così continuo per ore?

MODIFICA: Ho intenzione di provare e ottenere un breve video clip con alcune registrazioni per evidenziare il problema. Potrebbe volerci un po 'per riprodurlo.

• metto un punto di interruzione nel codice e rilevare il valore di riempimento ad un valore maggiore di 0 e minore di 1. In questo caso il suo valore era 0,6925

• messa un punto di interruzione nel codice , rompendo il punto e quindi permettendo che l'esecuzione continui, il riempimento della barra di avanzamento riappare!

EDIT2: Ecco un video che ciò accada: http://screencast.com/t/DvzBr06f

Answer 1

Non c'è limite. Quale browser utilizzate? Potrebbero esserci alcuni problemi con la cache del browser, quindi cerca di non modificare troppo l'immagine. Ecco un test che ho messo insieme, che funziona bene, FIDDLE e il codice:

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

Forse si può evitare di modificare la BG per granularità di < 0,3%?

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

Speriamo che se si tratta di un problema di risorse, 300 volte sarebbe fattibile - dove 10.000 volte forse non lo sarebbe.

Answer 3

No, non c'è limite. Puoi modificare l'immagine quanto vuoi, anche se potrebbero esserci problemi riguardanti la cache e le risorse, quindi tieni il valore entro 10000.

Answer 4

No, per quanto ne so, non ci sono limiti. E non penso che influisca davvero qualcosa.