Функция обратного вызова jQuery .load () запускается несколько раз

Question

при первом выполнении кода он правильно выдает:
загрузка завершена

но во второй раз он производит:
загрузка завершена
загрузка завершена

третий раз, когда он производит:
загрузка завершена
загрузка завершена
загрузка завершена

и т. Д. ... так что 20-й раз, когда функция загрузки завершает функцию обратного вызова, срабатывает 20 раз

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

есть идеи, что заставляет функцию обратного вызова повторяться / увеличиваться таким образом?

Answer 1

Если вы вызываете это внутри обработчика щелчков или что-то еще, это связывает обработчик new .load() каждый раз.Свяжите .load() один раз или используйте .one(), например:

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

Answer 2

Это потому, что вы добавляете другой обработчик событий каждый раз, когда запускаете этот код.

Если вы хотите добавить тег изображения в элемент, вам не следует использовать изображение, которое уже находится на странице. Вместо этого создайте новый тег изображения:

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