David,
I'm not sure how coincidential life could be, but i just began working
on the same icon set last night.
Although its not relevant to jquery, you can see a HUGE optimisation
boost using css sprites. This will get all 1,000 icons within view in
about 1-2 seconds (as opposed to several minutes) because, with CSS
Sprits, there is only 1 http request (as opposed to 1,000 http requests).
Unfortunately, though, i don't think it can be used in the presentation
box. For that, you might have to use AJAX to fetch each icon
individually. In any case, i think that would be better as the end user
would only have to wait to view icons that are of interest and not those
that don't want to be seen.
Fahed
David Singleton wrote:
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 )
