Thanks for the tips. Always using element.class in selectors makes sense, I should make it a habbit rather than being lazy. I understand about the idea of ID for a unique instance and classes for repeated types, but this was thrown together rather quickly as a demo, so the semantics aren't perfect.
In this example though, I don't think addressing them by elem.clas, or even ID is going to make a big impact, comparitively. I was more looking for suggestions around the filtering process and showing/ hiding the icon images. this is doing 99.9% of the work on the page, and it'll get run multiple times. So any improvement here would dwarf optomization anywhere else on the page. I made a crude delay on the search box, so that it'll only filter after it thinks you've stopped typing, I was wondering if there's an event model like this already in jquery? On May 27, 7:09 pm, Renato Formato <[EMAIL PROTECTED]> wrote: > David Singleton ha scritto: > > > > > > > > > I've been using jquery to build an icon picker for FAMFAMFAM's Silk > > icon set. I've got a working version > > (athttp://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? > > > $(document).ready(function() { > > > // Add preview > > $('div.primary').before( > > '<div class="preview"> \ > > <h2>Preview</h2> \ > > <img id="preview" alt="Hover on an icon for a preview " > > /> \ > > </div>' > > ); > > $('.preview').hide().fadeIn(1500); > > When you are dealing with single elements (in fact you have a single > .preview element in your page), is it really faster to use id instead of > classes. > > $('div.primary').before( > '<div id="preview_container"> \ > <h2>Preview</h2> \ > <img id="preview" alt="Hover on an icon for a preview > " /> \ > </div>' > ); > $('#preview_container').hide().fadeIn(1500); > > This single change will avoid to loop all the elements of your page to > find the single one that has the class preview. > > When you have not a single element and you can't use id, always use > $('element_name.class') if you know that only certain elements can have > that class. This will not loop all the element of the page but only the > elements of type element_name (all the div, the p, etc etc) > > > > > // Add Form > > $('div.primary').before( > > '<form action="" class="filter" autocomplete="off"> \ > > <h2><label for="search">Filter</label></h2> \ > > <input type="text" class="text" name="search" > > id="search" /> \ > > </form>' > > ); > > $('.filter').hide().fadeIn(1500); > > Same point as before > > Ciao > Renato
