Question

I have a page which has a img holder with the html: –

<img src="someimage.jpeg" alt="image" class="show_image"/>

Now i m updating the image with jquery using the code…

$('.show_image').attr('src', 'anotherimage.jpeg');

now when the image gets loaded i want to run some code…

as image scaling and letting the user know image is loaded

i run this code to know the image is loaded…

 var inc = 0;
    $('.show_image').load(function() {
        inc++;
        console.log('image loaded '+inc);
    });

now on repeatedly updating the img src the above load function is showing a strange

behaviour and is being called the number of times the img src is updated…

take a look at the firebig logs at this page…(use the prev n next buttons above)

pradyut.dyndns.org/original_image.jsp#imgid=202

i think i have to run the code like this

if(inc==1) {
  //run code
}

Any help

Thanks

Answer 1

Use jQuery’s .one() method:

$('.show_image').one('load', function() {
    inc++;
    console.log('image loaded '+inc);
});

This removes the handler after the first time it runs.