David,
>I've been using jquery to build an icon picker for FAMFAMFAM's Silk
>icon set. I've got a working version (at http://dsingleton.co.uk/code/icon-
>selector/),
>but with 1000 images on the page everything is a little slow, i'm
>wondering what I can do to optomize the JS make it a little snappier?
[... clip ...]
> // All the icons, we'll be using this a lot
> var icons = $('ol.icons li a');
Quite frankly, searching over thousands of elements is just slow. Generally
always has been. It's not so much a jQuery issue as parsing thousands of DOM
elements generally is a performance hog.
As already stated by someone else, I'd recommend trying to simplify the
selector as much as possible. I'd probably give each anchor tag a class that
indicates it's for an icon:
var icons = $('ol.icons a.icon');
This will do a little less work.
However, you're best option for speed may to be to just add a onmouseclick
event to the document and then just have that event handler look to see if
you click on a a.icon element.
This prevents needing to parse through the DOM looking for thousands of
matches, and instead you just do some parsing on each mouse click. You could
also even just check the <img /> element directly.
For example:
$(document).bind("click", function (e){
// get the target element (srcElement for IE, originalTarget for
W3C)
var el = e.srcElement || e.originalTarget;
if( el.tagName == "A" && el.className == "icon" ){
alert("Hey, I'm an a.icon element!!!");
return false;
}
});
The above code will monitor each mouse click event. If you click on the an
<a /> tag with a class name of "icon", the alert() will be triggered.
This code allow you to very efficient add the behavior you're looking
for--without having attach the behavior to each and every <a /> tag.
This should be extremely fast and efficient...
-Dan
