javascript - jQuery - Lightgallery.js - 检测幻灯片即将结束

Question

有谁知道我可以在下面的代码中使用什么样的条件来确定幻灯片是否即将结束？

换句话说，如果幻灯片中剩余的图像少于 4 个，则发送新的 ajax 调用并将响应附加到当前响应。

我设法获取每个图像的索引，但是我在下面使用的条件，即 if (index > 2) 显然失败了，因为它会触发对任何后续项目的 ajax 调用，并且每个幻灯片中的项目数量会有所不同，因此固定数量是行不通的。以下是我到目前为止所拥有的。

也在 fiddle 中here .

$(document).ready(function() {
    $("#links").lightGallery({
        selector: '.img-wrap',
        html:true,
        speed: 300,
    });     
    var $lg = $('#links');     
    $lg.lightGallery(); 
    $lg.on('onBeforeSlide.lg',function(event, index, fromTouch, fromThumb){        
        console.log(index, fromTouch, fromThumb);        
        if (index > 2) { // This doesn't work
            // Trigger new ajax call
            // Append items in response to current slidewhow
        }
    });
});

Answer 1

如果使用 .img-wrap 从元素长度中减去缓冲区编号(本例中为两个)会怎样？

$(document).ready(function() {
    $("#links").lightGallery({
        selector: '.img-wrap',
        html:true,
        speed: 300,
    });     

    var $lg = $('#links');
    var bufferThreshold = 2;//number of images remaining before we fetch more

    $lg.lightGallery();

    $lg.on('onBeforeSlide.lg',function(event, index, fromTouch, fromThumb){
        console.log(index, fromTouch, fromThumb);
        if (index > $('.img-wrap').length - bufferThreshold) {
            //almost done, get more!
        }
    });

});