jQuery-Lightgallery.js-检测到slidehsow即将结束

Question

Does anyone know what kind of condition I can use in the code below to establish whether the slideshow is nearing its end?

In other words, if there are fewer than 4 images left in the slideshow, send a new ajax call and append the response to the current response.

I manage to get the index of each image, but the condition I'm using below, ie if (index > 2) obviously fails because it triggers the ajax call on any subsequent item, and the number of items in each slideshow will vary, so a fixed number won't do. Below is what I have so far.

Also in a 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

What if you subtract your buffer number (two in this case) from the length of the elements with .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!
        }
    });

});