[jQuery] A demo and an optimization question
Hi everyone,
First of all, jquery is pretty damn awesome and has made Javascript
fun.
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?
(This is also the first time i've used jquery for anything
substantial, so any tips, suggestions or corrections would be much
appreciated!)
$(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);
// 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);
// All the icons, we'll be using this a lot
var icons = $('ol.icons li a');
// Add hover previews (doesn't work on filtered out icons)
icons.hover(function() {
if ($(this).css('opacity') > .5) {
$('img#preview').attr('src', this.href);
}
return false;
}, function() {
// Remove hover afterwards
if ($(this).css('opacity') > .5) {
$('img#preview').removeAttr('src');
}
});
// Filtering search (with delay)
var search_timer = false;
$('#search').keyup(function() {
// Clear timed events if we've have another key press
if (search_timer) {
window.clearTimeout(search_timer);
}
var filter = this.value;
search_timer = window.setTimeout(function () {
// If we match the filter word anywhere then full opacity,
// otherwise greyed out
icons.each(function() {
var opacity = (this.title.indexOf(filter) >= 0) ? 1 : 0.1;
$(this).css('opacity', opacity);
});
}, 300);
return false;
});
});
(Also at http://dsingleton.co.uk/code/icon-selector/icons.js )