The plugin is not working initially

I need it to work as soon as the page is loaded but it starts working after I resize the window.

How could it work the way I need in the demonstartion (http://mattstow.com/experiment/responsive-image-maps/rwd-image-maps.html) but not in my code?

[wardhache]

For anyone facing this issue now, I resolved it with using $(window).on('load') instead of $(document).ready().

I use this plugin together with maphilight to show my areas, and since it is 2019, I wanted to make it responsive. Obviously. Underneath the code I used. I hope it helps:

Javascript:

jQuery(document).ready(function(e) {
    var imageMapping = function() {
        $('#mapping').maphilight({
            stroke: true,
            strokeColor: '666666',
            strokeOpacity: 0.5,
            strokeWidth: 1,
            fill: true,
            fillColor: '666666',
            fillOpacity: 0.3,
            alwaysOn: true,
            wrapClass: 'map'
        });
    }

    $('#mapping').rwdImageMaps();

    $(window).on('load', imageMapping)
    $(window).on('resize', imageMapping);
});

CSS:

.map {
    background-size: contain !important;
    width: 100% !important;
    background-repeat: no-repeat !important;
}