Load Modal Contents Only When show is called

Question

I have a nice little ToDo application that allows a user to create an item in a list. They can click and drag the items in the list to sort the order. However, I am worried about performance when it comes to them being able to select an icon for their item. I'm using the Fat Cow icon set and would like them to be able to personalize their list. Everything is working as expected. However, I am a bit worried about the performance on the server as well as the wait on the end user side.

Whenever the user clicks on the Select Icon button, it will use the Twitter Bootstrap Modal and allow them to click on an icon. Once they click on the icon, it populates a textfield with the name of the icon. However, there are 3000 icons being loaded whenever they NEW or EDIT the item.

I am using AJAX in the background to handle the clicking of the icon and putting it onto the textfield that will be used to display the icons in the list. My question is:

Is there a more efficient way without cutting back on the icons to deliver a modal that the user can select the different icons. Here is a snippet of two items from the list of 3000+ that is placed in a partial.

Sometimes a user may not want to use an icon in which case it will default to the bullet. I would only want the list of icons to load whenever they press the Select Icon button.

<%= link_to_function image_tag("/assets/icon/32_bit.png"), "$('body').select_icon('32_bit')" %>
<%= link_to_function image_tag("/assets/icon/3d_glasses.png"), "$('body').select_icon('3d_glasses')" %>

Answer 1

Yikes, what about creating groups of icons and presenting a menu of categories first, to cut down on the total number of icons you need to deal with at a time? I'm sure the users would appreciate it as well; it can get overwhelming when people have too many choices.

So in the modal have a dropdown with the groups and populate the rest of the window with just the icons of that group...