JQuery: событие загрузки на изображении не работает

Question

Я пытаюсь вызвать функцию после полной загрузки изображения в DOM.

Структура изображения создается динамически при AJAX успешном вызове, а URL-адрес изображения также добавляется при успешном использовании, используя результат API call.

Проблема: Я хочу вызвать функцию после полной загрузки изображения в DOM. Для этого я использовал JQuery load событие.

Функция, которая вызывается при загрузке.

function carouselHeight() {
    $('.home-banner-img-container').each(function() {
        var $this = $(this);
        var dynamicheight = $(this).parent();
        var sectionInnerHeight = $this.innerHeight();
        dynamicheight.css({
            'height': sectionInnerHeight
        });
    });
}

Я пробовал ниже шаги, но это не так работал

$(window).on('load', function() {
   carouselHeight();
});

$(window).on('load', 'img.image-preview', function() {
  carouselHeight();
});

$(document).on('load', 'img.image-preview', function() {
  carouselHeight();
});

Первый метод $(window).on('load', function() {}) отлично работает при полной перезагрузке, но при нормальной перезагрузке он не может найти элемент $('.home-banner-img-container'), который находится внутри функции carouselHeight.

Пожалуйста, помогите мне найти решение для этого. Спасибо.

Answer 1

Я нашел решение для переполнения стека , где я добавил следующий код в ajax метод завершения вызова.

function imageLoaded() {
       // function to invoke for loaded image
       // decrement the counter
       counter--; 
       if( counter === 0 ) {
           // counter is 0 which means the last
           //    one loaded, so do something else
       }
    }
    var images = $('img');
    var counter = images.length;  // initialize the counter

    images.each(function() {
        if( this.complete ) {
            imageLoaded.call( this );
        } else {
            $(this).one('load', imageLoaded);
        }
    });