The $('.HelpTipAnchor') is certainly time-consuming, but after that's done,
the cluetip plugin still has to loop over all those elements and set up a
lot of stuff. My guess is that the latter is where most of the time is
going.
It's easy enough to find out which: simply split apart the selector and the
.cluetip call:
var t1 = +new Date;
var $anchors = $('.HelpTipAnchor');
var t2 = +new Date;
$anchors.cluetip(...);
var t3 = +new Date;
alert( 'Selector: ' + (t2-t1) + ', cluetip(): ' + (t3-t2) );
Of course, knowing this result doesn't solve the problem, and with 400-500
items it's going to be slow regardless.
The real solution for this is event delegation. This would completely
eliminate the overhead of setting up so many elements.
Unfortunately, cluetip does not support event delegation. But Karl wrote
some quick and dirty tooltip code that does support event delegation and
would be very fast:
http://osdir.com/answers/javascript/2618-jquery-optimizing-easiest-tooltip.h
tml#2
Maybe you could use this code as a start for a custom tooltip plugin?
-Mike
_____
From: David Morton
I am trying to use Cluetip to make a help text for what can be a large list
- and I'm hearing reports that a list of 100 items with 4-5 columns each is
causeing IE7 to slow down or appear to freeze for a while, and commenting
out the cluetip invocation clears it up. I'm assuming it's jsut due to
poor javascript speed as it loops over all the DOM to activate all the
required DOM elements.
Right now, I'm invoking them all with one command that uses a class to pick
them up:
$('.HelpTipAnchor').cluetip({local:true, cluezIndex: 105, showTitle:
false,cluetipClass: 'maia', arrows: true, localPrefix: "#cluetip_",
attribute: "id"});
Is it the $('.class') part that's slow, as I suspect? Is there anything I
can do to speed it up?
--
David Morton
morto...@gmail.com - bulk address
morto...@dgrmm.net - direct to my server
