jQuery script is slow in IE 6/7

Question

Could someone take a moment to look at my script and see where I have gone wrong. This works fine in all modern browsers. Its IE6/7 which have the problem.

A 9KB color picker loaded.

Once loaded the picker is run.

picker.run();

This makes the picker and saves it as an object variable.

This variable can then be shown using.

picker.show();

I think the delay in opening the picker in IE might be due to the size of the color-pickers HTML. I have been tinkering with this all day and have run out of ideas. Can anyone advise?

picker : http://jasonstanley.co.uk/test/color-picker/

script : http://jasonstanley.co.uk/test/color-picker/js/color-picker.js

Answer 1

It could simply be a factor that targeting multiple instances of a class will be slow in ie6 - ie8. I would have a look for alternatives or see i've you can improve the accuracy of the selectors used in the script.

The script also removes the picker rather than hiding it. Is there a reason why this is necessary? If so using .empty().remove() will probably speed things up too.

See the comments here in the jQuery Api

Answer 2

I have experienced slow JavaScript execution in IE7 when using prototype.js. It all boiled down to:

1. Do not concatenate strings, use arrays
2. Add content ONLY via element.innerHTML, or even better, document.write, and add as little content as possible
3. Use event handling with care, add only handlers when you need them
4. Use ID's instead of classes.

In your cube function you do concatenate strings (and declare variables inside loops...), I would look into that first.