implementing image gallery that lazy loads images of unknown size on scroll and positions them optimally

Question

I need to implement an image gallery with the following spec:

images need to have a max height and width. they keep their aspect ratio within these bounds.
based on the final size of the images after the max size constraints, order them on the page in a way that reduces empty blank spaces.
as the container scrolls down, load more images.

libraries I have researched such as masonry and this lay load lib all expect width and height to be known ahead of time.

It seems that I may need to resort to loading the images in an invisible state in order to get the width and height params before positioning them on the page. this will help with the 'masonry' aspect, but contradict the lazy load mechanism.

I would appreciate any pointers in the right direction.

score 1 · Answer 1 · edited May 23 '17 at 12:24

I'm using Masonry right now and I think that it fits to your needs. I have different width&height images and I load with a fixed max-width (with a fixed width or a relative to the page one) and then, the layouts reorders to avoid blank spaces and keep aspect ratio of the images. When I reach the bottom of the page, I ('manually') load more items. This is my code

//Load the first page
loadMore(1);

function loadMore(page){ 
    var div = "";
    var html = "";
    var item_num = 1 + ((page-1)*10);

    $('.loader').show();
    $('#container').hide();

    $.post( "loadMore.php", {'page':page }, function( data ) { 
        data=JSON.parse(data);
        $.each(data, function (key,value) {
          //here create the div with the data
          html = html + div;                                                                 
          item_num++;   
        }); 

        $("#container").append(html).each(function(){                              
        $('#container').masonry().masonry('reloadItems');
        });            

        var $container = $('#container');
        $container.imagesLoaded(function(){
          $('#container').masonry();
        }); 

        $('.loader').fadeOut('fast',function(){
        $(this).remove().delay( 1500 );
        });
        $('#container').show();                        

    });
}

//On bottom page, load more images
$(window).scroll(function () {
    if (ready && $(document).height() <= $(window).scrollTop() + $(window).height()) {
        ready = false; //Set the flag here  

        setTimeout(function(){
        loadMore(page);                
        page++;
        },1000);

        ready = true; //Set the flag here  
    }
});

You can check the result at http://pintevent.com (is a beta page)

Then, is easy to add LazyLoad to all images, here is a working example: http://jsfiddle.net/nathando/s3KPn/4/ (extracted from a similar question: Combining LazyLoad and Jquery Masonry )

Also, if it not works for you, here's a bunch of jquery LazyLoad libraries for galleries you could check: http://www.jqueryrain.com/demo/jquery-lazy-load/

Hope it helps to you!

thank you for the thorough and and code sample, complete with working example and link to relevant example. Very high quality answer! by the way, you can optimize the loadMore function by defining $container at the top and always referencing $container instead of doing a new query with $('container'). — CodeToad, Mar 23 '16 at 06:38

implementing image gallery that lazy loads images of unknown size on scroll and positions them optimally

1 Answers1