How to show a popup if an image(s) has not fully loaded in a particular timeframe using Owl Carousel-2 (v-2.3.4)

I am using Owl Carousel-2 v2.3.4 which is initialized as follows:

$('#myPages').owlCarousel({
        dots: false,
        lazyLoad: true,
        lazyLoadEager: 2,
        autoWidth: false,
        autoHeight: false,
        items: 1,
        slideBy: 1,
        nav: false,
        loop: false,
        checkVisible:false,
        margin: 10,
        onDragged: callback,
        onInitialized: callback1,
        onLoadLazy: checkImgLoad(this),
        //onLoadedLazy: checkImgLoaded
    })

In the above initialization, I have added checkImgLoad for onLoadLazy callback which is basically called when a lazy image is loading and has not fully loaded. The main functionality of this function is to check in a particular time frame (for example 5 seconds) if the image has loaded or not. If the image has not loaded in that 5 second duration, a popup should be shown to the user that image is still being loaded. Once the image has fully loaded, the popup should automatically disappear.

For a better understanding of the callbacks you can refer to their official documentation

There is also a onLoadedLazy callback which is triggered by the plugin when lazy image has fully loaded so that can also be used if necessary. I thought of putting a setTimeout function in the onLoadLazy callback function like this:

var myVar;
function checkImgLoad(imgObj) {
        try {
         clearTimeout(myVar);
         var imgload=true;
         if (!imgObj.complete || imgObj.naturalWidth === 0) {
            imgload= false;
         }

        if (!imgload) {
            $("#loader").show();
            myVar = setTimeout(function () {
                try {
                    $("#loader").hide();
                    var modal = document.getElementById("myPopup");
                    modal.style.display = "block";
                    var span = document.getElementsByClassName("close")[0];
                    document.getElementById("btn_close").onclick = function () {
                        modal.style.display = "none";
                    }
                } 
                catch (error) { }
            }, 5000); //after every 5 seconds
            
        }
    } catch (error) { }
}

But I am having problems in getting the current image object in question (this keyword does not work) and overall in getting the gist of the callback's and how to use them to achieve such a functionality. It would be great if someone could help me out or share their knowledge on this scenario.

My HTML structure is below:

<div id="myPages">
<div class="mylayer"><img class="img-one owl-lazy" src="myimg1.jpg" data-src="myimg1.jpg" /><img class="img-two owl-lazy" src="myimg1.png" data-src="myimg1.png" />
</div>

<div class="mylayer"><img class="img-one owl-lazy" src="myimg2.jpg" data-src="myimg2.jpg" /><img class="img-two owl-lazy" src="myimg2.png" data-src="myimg2.png" />
</div>

<div class="mylayer"><img class="img-one owl-lazy" src="myimg3.jpg" data-src="myimg3.jpg" /><img class="img-two owl-lazy" src="myimg3.png" data-src="myimg3.png" />
</div>
</div>