CODEWITHSUNDEEP
javascriptcssfor-loopsvg
Ruben
Ruben

Reputation: 1091

Hiding SVG elements takes so much time

I'm trying to show/hide some svg elements. My svg is kind of huge. In order to show or hide, it takes like 8 seconds for doing that. I would really like having it in less time. It is about 1996 elements (don't think it is to much for that time). Therefore, I think my code is not the best one. I hope you can help me optimizing that code. 

isChecked = jqElement.is(':checked');
type = jqElement.attr('tag');
var start = new Date().getTime();
elements = document.getElementsByClassName(type);
console.log('LAYER ' + type + ': ' + elements.length);
for (j=0; j<elements.length; j++)
    elements[j].setAttribute('visibility', (isChecked)? '' : 'hidden');
var end = new Date().getTime();
var time = end - start;
console.log('Execution time for layer ' + type + ': '+ time);

Thanks in advance

Upvotes: 0

Views: 46

Answers (1)

user3553031
user3553031

Reputation: 6224

Are all of the SVG elements inside some common container? If so, you could try manipulating the container's visibility instead of each individual element's. Alternately, can you manipulate the style rules for the class and let the browser worry about applying the new rules to everything?

Upvotes: 2

Related Questions