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 ;)

Found the problem. Used imggg.onload = null instead of unbind. — Somebody, Sep 15 '10 at 12:00
You should look at using hoverIntent http://cherne.net/brian/resources/jquery.hoverIntent.html which builds in a delay. — epascarello, Sep 15 '10 at 12:13

score 7 · Accepted Answer · answered Sep 15 '10 at 12:10

7

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.

answered Sep 15 '10 at 12:10

Nick Craver

594,859
130
1,270
1,139

score 1 · Answer 2 · answered Jan 15 '21 at 07:31

1

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?

answered Jan 15 '21 at 07:31

Rohit Tagadiya

1,473
1
8
16

Javascript - Cancel onload event

2 Answers2