Execute a function after all images within a div loaded

Question

I want to get height of a div with jQuery and in this div, there is some images that change the size of this div when loaded:

but with code below, it gives me height of div before images were loaded

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

I've changed my code to this but nothing change:

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

Can anyone help me change the code to reach my goal?

Answer 1

You can use $(window).load() which fires when the document and it's assets are fully loaded, including all objects and images:

The load event fires at the end of the document loading process. At this point, all of the objects in the document are in the DOM, and all the images and sub-frames have finished loading.

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