Javascript "Unresponsive Script" adding Jquery event handlers -

i've created little javascript web page movember let users "shave" beard moustache, or off.

i've done covering shaved picture grid of divs holding bearded picture differing offsets. when user moves mouse on 1 of divs, disappears, showing shaved skin in picture underneath.

the problem in creating 4000 little divs, jquery.min.js script keeps popping "unresponsive script" error.

i'm hoping can spot inefficient in code, or suggest how jquery take breath. tried having "loading..." spinning wheel gif show while code running, javascript threw hourglass gif never showed up.

here's code:

<script type="text/javascript"> var iserase = false; var iscover = false; var size = 4; var = 0; var j = 0; $(document).ready(function(){  (i = 0; < 400; += size) {   (j = 0; j < 250; j += size) {    $('#picture').append('<div class="piece" style="background-position:  -' + j + 'px -' + + 'px;" />');   }  }  $('div.piece').click(function(event){   iscover = false;   iserase = ! iserase;   if (iserase) $('#mode').html(' *** shaving ***');   else $('#mode').html('off');  });  $('div.piece').dblclick(function(event){   iserase = false;   iscover = ! iscover;   if (iscover) $('#mode').html(' *** unshaving ***');   else $('#mode').html('off');  });  $("div.piece").mouseenter(function(event){   if (iserase) { $(this).addclass('invisible'); }   else if (iscover) { $(this).removeclass('invisible'); }  }); }); </script> 

<script type="text/javascript"> var iserase = false; var iscover = false; var size = 4; var = 0; var j = 0; var str = ''; $(document).ready(function(){  (i = 0; < 400; += size) {   (j = 0; j < 250; j += size) {     str += '<div class="piece" style="background-position:  -' + j + 'px -' + + 'px;" />';   }  }   $('#picture').html(str).delegate('div.piece', 'click', function (event) {   iscover = false;   iserase = ! iserase;   if (iserase) $('#mode').html(' *** shaving ***');   else $('#mode').html('off');  }).delegate('div.piece', 'dblclick', function(event) {   iserase = false;   iscover = ! iscover;   if (iscover) $('#mode').html(' *** unshaving ***');   else $('#mode').html('off');  }).delegate('div.piece', 'mouseenter', function(event) {   if (iserase) { $(this).addclass('invisible'); }   else if (iscover) { $(this).removeclass('invisible'); }  }); }); </script> 

the biggest inefficiency's in code follows:

1. manipulating dom 100,000 times; adding new piece each time. creating string html , adding once quicker.
2. not caching jquery selectors. looking div id of 'picture' , building jquery object of 100,000 times. each time used $('div.piece'), looked 100,000 of those. either chain jquery methods, or cache objects.
3. binding same event 100,000 piece's. take advantage of javascripts event bubbling, , add event once ancestor of elements (see delegate()).