Javascript 如何使用Owl Carousel-2（v-2.3.4）在特定时间段内未完全加载图像时显示弹出窗口

我使用的是Owl Carousel-2 v2.3.4，其初始化如下：

$('#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
    })

在上面的初始化中，我为

onLoadLazy

回调添加了

checkImgLoad

，该回调基本上是在加载惰性图像且尚未完全加载时调用的。此功能的主要功能是在特定时间范围内（例如5秒）检查图像是否已加载。如果图像在5秒内未加载，则应向用户显示仍在加载图像的弹出窗口。图像完全加载后，弹出窗口应自动消失

为了更好地了解回调，您可以咨询他们的官方

还有一个

onLoadedLazy

回调，当lazy映像已完全加载时，插件会触发该回调，以便在必要时也可以使用该回调。我想在

onLoadLazy

回调函数中放置一个

setTimeout

函数，如下所示：

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) { }
}

但是我在获取当前的图像对象时遇到了问题（

这个

关键字不起作用），在获取回调的要点以及如何使用它们来实现这样的功能方面也遇到了问题。如果有人能帮助我或者分享他们在这个场景中的知识，那就太好了

我的HTML结构如下：

<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>

在解决手头的问题之前，您遇到了

onLoadLazy

事件的问题，该选项需要一个函数（

onLoadLazy:checkImgLoad

），但您正在向它传递一个函数调用（

onLoadLazy:checkImgLoad（this）

）。您是否打算这样做：

onLoadLazy：（this）=>checkImgLoad（this）

？只是一个如何工作的想法。（这里的最后一张图片是一个缺陷，因此在5秒后触发模态。）@RolandStarke感谢您的努力。我想问你，当图像加载后，弹出窗口将如何自动隐藏？另外，如果在一个帧中有两个图像，我需要找出这两个图像是否都已完全加载，否则显示慢速加载弹出窗口。我希望你明白我的意思。你可以只维护一个布尔数组，它相当于加载的图像数量。加载对应于该索引的图像后，将数组中每个项目的值设置为true，在上面的@RolandStarke示例中，在img onLoad事件中。此外，您还需要在timeout函数中添加一些逻辑，以便仅在数组中的任何项目（与转盘的当前窗口相对应的索引）为false时显示弹出窗口。