The jQuery.load () callback function fires several times

Question

when you run the code for the first time, it correctly produces:
full load

but the second time it produces:
download full version full download

3rd time it produces:
download full version download full version full download

etc., so that the 20th time the load function completes the callback function, it fires 20 times.

$('#image-tag').load(function () {
        console.log("load complete");
    });
}).attr('src', 'image.jpg').appendTo('#main');

any idea what calls the callback function to repeat / increment like this?

Answer 1

This is because you add a different event handler every time you run this code.

, , . :

$('<img/>').load(function () {
  console.log("load complete");
}).attr('src', 'image.jpg').appendTo('#main');

Answer 2

, - , .load() . .load() , .one(), :

$('#image-tag').one('load', function () {
    console.log("load complete");
});