Estava brincando com um snippet que fiz apenas para me divertir e me deparei com um problema que não consigo achar uma razão para sua causa. Segue o snippet:
var i = 0;
setInterval(function() {
document.querySelectorAll('img').forEach(function(imagem) {
imagem.setAttribute('style', 'filter: hue-rotate('+ i +'deg)');
if(i < 360) { i++ } else { i = 0 }
});
}, 10);
Quando executo esse snippet numa página com apenas uma imagem e mais nada, pegando a url direta da imagem, ele funciona exatamente como eu quero. Mas se eu jogo o mesmo código numa página da web normal que possui imagens dentro dela, a rotação está pulando valores de forma absurda, geralmente passando por 3 valores antes de voltar para 0 graus. Ou seja, ao invés de a cada 0,1 segundos ele aumentar 1 grau, como deveria ser, aumenta 120 graus a cada 0,1 segundo fazendo as imagens piscarem. Se eu reduzo o delay do setInterval
, fica fácil de ver a mudança nos graus acompanhando a aba do chrome. O que está causando isso, e como resolver?
Grato.
@edit Fiz um teste e alguns sites funcionam normais enquanto outros dão o erro descrito acima. Um exemplo de página que dá o erro descrito acima seria a busca de imagens do google, ou o portal Terra.
i
. Todas as imagens executam um loop que incrementai
. Logo, quanto mais imagens, mais incrementos emi
. O que torna sua animação tão rápida, dependendo da quantidade de elementos rodando esse loop.