Infinite Scroll load new images each time

[dirkml]

Hi,

I'm trying to add some image via the Infinite scroll but each time I scroll, it add the same images. I'm really bad with javascript, can you help me ?

$(window).scroll(function() {
            if($(window).scrollTop() + $(window).height() == $(document).height()) {
                for (var i = 0; i < 5; i++) {
                    $('#gallery').append('<a>' +
                        '<img src="portofolio/t/DM__4133.jpg" />' + 
                        '</a>', '<a>' +
                        '<img src="portofolio/t/DM__4182.jpg" />' + 
                        '</a>');
                }
                $('#gallery').justifiedGallery('norewind');
            }
        });

[miromannino]

Seems what you are doing, you are always appending always the same 2 images... What do you want to do? Maybe you would generate the images from a backend request or something else, right?

[dirkml]

Yes! Basically, I want to load different images each time. I have a large gallery and want to load not all in the same time.

[dirkml]

I tried with different way, but it always add images in a loop. I want it to check if the images are already there, and if yes, the loop stop...

[miromannino]

Yes, but this is not about JG, this is about your implementation, and that can be done in many ways. Suppose that you have a backend that tells you that there are 42 images, and with an ajax call you put that in a variable imgsNum. You can do something like:

var currentIdx = 0, initialImgsNum = 20;
for (currentIdx = 0; currentIdx < initialImgsNum && currentIdx < imgsNum; currentIdx++) {
    $('#gallery').append('<a><img src="portofolio/t/DM__' + currentIdx + '" /></a>');
}
$('#gallery').justifiedGallery( /* initial settings */ );

$(window).scroll(function() {
    if($(window).scrollTop() + $(window).height() == $(document).height()) {
        for (; currentIdx < imgsNum; currentIdx++) {
            $('#gallery').append('<a><img src="portofolio/t/DM__' + currentIdx + '" /></a>');
        }
        $('#gallery').justifiedGallery('norewind');
    }
});

Have you done something like that?