load() method is entered (executed) many times

Question

in my html page, i have an image, and on clicking a button, i'm calling the function TestLoad() where it is changing the src of the image and when the image is loaded i'm doing something... take an example: javascript:

function TestLoad() {

    alert('before');
     $('#ImgTest').attr('src', 'Images/Image1.jpg');

     $('#ImgTest').load(function () {
         alert('after');
     });
}

html:

 <img id = "ImgTest" alt="" src="" style="width:100px; height:100px"/> 

 <input type="button" onclick ="TestLoad();" value="TestLoad"/>

my problem is: when i click the button for the first time, i'm getting the alert "after" one time and if i click another time, the alert will be displayed two time and the third, 3 times...

Kindly advice Thanks

[Read the docs](http://api.jquery.com/load-event) - `.load` isn't reliable when used on images. [You need to do some magic](http://stackoverflow.com/questions/3877027/jquery-callback-on-image-load-even-when-the-image-is-cached). — Blazemonger, Dec 21 '12 at 16:08
Each time you bind to the load event, you are adding a new handler in addition to the previous handler to the load event. Why would it NOT fire it once for each time you bound it? — Kevin B, Dec 21 '12 at 16:08
@Blazemonger there's a far better way of doing it than what was suggested in that answer, fyi. simply bind the load event prior to changing the src, then it will always trigger regardless of it being cached in all browsers. :) — Kevin B, Dec 21 '12 at 16:10

Justin Niessner · Accepted Answer · 2012-12-21T16:10:40.653

2

Each time your handler executes, it adds another new load handler. You only need to assign the handler a single time. If you really need to do it this way, you can either remove the existing handlers first or check the events to see if it's already being handled:

var $imgTest = $('#ImgTest');

$imgTest.attr('src','Images/Image1.jpg');
$imgTest.unbind('load');
$imgTest.load(function(){
    alert('after');
});

Or:

var events;
var $imgTest = $('#ImgTest');

$imgTest.attr('src', 'Images/Image1.jpg');
events = $imgTest.data('events');
if(events !== null && typeof events.load === undefined){
    $imgTest.load(function(){
        alert('after');
    });
}

edited Dec 21 '12 at 16:10

answered Dec 21 '12 at 16:05

Justin Niessner

242,243
40
408
536

Note, you'll want to bind the load event prior to changing the src, otherwise cached images will not trigger the load event in oldIE. – Kevin B Dec 21 '12 at 16:18
Also, `.data('events')` won't work in 1.8+, there is a workaround using `_data` but recommended for debugging use only. – Kevin B Dec 21 '12 at 16:28

score 1 · Answer 2 · answered Dec 21 '12 at 16:05

Your onclick event is probably binding another load event.

You don't need to keep adding the event to it. It already exists. If you need to bind another one, you'll want to unbind the previous event first.

.on("load", function() { ... });
.off("load");

score 0 · Answer 3 · answered Dec 21 '12 at 16:05

You are binding multiple functions in your event handler

//bind this outside of your test load method
$('#ImgTest').load(function () {
    alert('after');
});

function TestLoad() {
    alert('before');
     $('#ImgTest').attr('src', 'Images/Image1.jpg');
}

load() method is entered (executed) many times

3 Answers3