延迟加载不适用于自举轮播

Question

我有一个非常大的网站，但由于轮播中有大量图片，该网站的速度有所减慢。为了减少加载时间，我使用了延迟加载来防止在页面上加载高质量的图像。我有一个单击功能，一旦用户离开主页就会触发延迟加载，并用高清图像替换虚拟图像。问题是，当用户滚动到页面应仅显示第一张图像的页面部分时，有时会替换第二张图像。其余的保留为虚拟图像。

<div class="item active">
    <img src="./img/tinyBlur.jpg" data-2x-1="./img/design7.png" class="carosuelImg lazyload-2x loading-lazy hidden">
</div>
<div class="item">
    <img src="./img/tinyBlur.jpg" data-2x-1="./img/design8.png" class="carosuelImg lazyload-2x loading-lazy hidden">
</div>

$(".blocks").click(
    function(){
    $('.lazyload-2x').each(function() {
        $(this).Lazy({
            attribute: 'data-2x-1',
            threshold: 0
        });
    });
});