jquery - 加载 div 中的所有图像后执行函数

Question

我想用 jQuery 获取 div 的高度，在这个 div 中，有一些图像在加载时会改变这个 div 的大小：

但使用下面的代码，它在加载图像之前给了我 div 的高度

$(document).ready(function() {
        $(".link_module").each(
            function () {
                maxheight = Math.max(maxheight,$(this).height());
            }
        ).height(maxheight);
});

我已将代码更改为此，但没有任何变化：

$(document).ready(function() {
    $(".link_module img").load(
        function (){
            $(".link_module").each(
                function () {
                    maxheight = Math.max(maxheight,$(this).height());
                }
            ).height(maxheight);
        }
    )
});

谁能帮我更改代码以达到我的目标？

Answer 1

您可以使用$(window).load()which 在文档及其资产完全加载时触发，包括所有对象和图像：

load 事件在文档加载过程结束时触发。至此，文档中的所有对象都在 DOM 中，所有图片和子帧都加载完毕。

$(window).on('load', function() {
    $(".link_module").each(
         function () {
            maxheight = Math.max(maxheight,$(this).height());
         }
    ).height(maxheight);
});

Answer 2

试试这个

$(document).ready(function() {
   var $this = $(this);
   $(".link_module img").load(
      function (){
          $(".link_module").each(function () {
            maxheight = Math.max(maxheight,$this.height());
          }).height(maxheight);
   });
});

Answer 3

试试这个。让我知道它是否有效。

var childW=0
$(".link_module").children().each(function(){    
    $("img").load(function() { 
     childW+=$(this).outerWidth();
     });
});