Javascript - Cancel onload event

Question

    var town_imgs = $('.town_img img');
    var container;
    var imggg
    town_imgs.hover(function(){

        container = $('<div class="town_img_thmb">'
                +'<span class="thmb_container ajax2"></span>'
            +'</div>').appendTo($(this).parents('.town_wrapper').find('.thmb_wrapper'));

        var imggg = new Image(140,100);             
        imggg.onload = function(){
            container.find('.thmb_container').append(this);
        }
        imggg.src = $(this).attr('src').replace(/\/t0\//,'/t1/');               

    },function(){

        container.remove();
        $(imggg).unbind('onload');

    });

Isn't working when I'm hovering thumbnails very fast. It displays 2-3 images in a row for a about 250-500ms~

As I understand it happens because I'm using outside variable to store current thumbnail.

Is it?

Is there solution to cancel onload event properly?

Thanks ;)

Solution 1

There are 2 problems, you want to remove var from this, so your reference is correct:

var imggg = new Image(140,100);

Then unbind by clearing the onload function you set:

imggg.onload = null;

You can see a working demo here.

Solution 2

If you want to Cancel/destroy onload event using jQuery

You can use unbind function.

$('#myimage').unbind('click');

You can get more help from here:
Best way to remove an event handler in jQuery?