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 (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?
$(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
