JQuery：图像上的 Onload 事件不起作用答案

【问题标题】：JQuery: Onload event on image not workingJQuery：图像上的 Onload 事件不起作用
【发布时间】：2020-07-18 07:33:57
【问题描述】：

我试图在图像完全加载到 DOM 后调用一个函数。

在AJAX调用成功时动态创建图片结构，并使用API调用的结果成功添加图片url。

问题： 我想在图像完全加载到 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() {}) 在硬重新加载时完美运行，但在正常重新加载时无法找到carouselHeight 函数内部的$('.home-banner-img-container') 元素。

请帮助我找到解决方案。谢谢。

【问题讨论】：

您可以使用函数find() 来实现这一点，就像`$("parent element").find(".home-banner-img-container")`。
@KunalRaut $('.home-banner-img-container').length 为 0，因为 window.load 在 dom 加载之前工作。所以即使 find() 方法也不起作用。
在这种情况下，那么等待加载相同的元素怎么样$(".home-banner-img-container").on('load', function() { carouselHeight(); });
$(".home-banner-img-container") 元素是一个包含 img 标签的容器。加载此图像后。我想调用该函数。 $(".home-banner-img-container") 是在 ajax 调用中动态创建的
$(".home-banner-img-container").on('load', function() { carouselHeight(); }); 不工作。

标签： javascript jquery image

【解决方案1】：

我在 stack overflow 上找到了解决方案，我在 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);
        }
    });

【讨论】：