实现延迟在滚动上加载未知大小的图像并最佳定位的图像库

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

本文关键字：图像 最佳 定位 延迟 滚动 未知 加载 实现      更新时间：2023-09-26

我需要使用以下规范实现一个图像库：

  1. 图像需要具有最大高度和宽度。 它们将其纵横比保持在这些范围内。

  2. 根据最大大小限制后图像的最终大小，以减少空白区域的方式在页面上对它们进行排序。

  3. 当容器向下滚动时，加载更多图像。

我研究过的库，例如砖石和这个铺设负载库所有人都希望提前知道宽度和高度。

似乎我可能需要诉诸于以不可见状态加载图像，以便在将它们定位到页面上之前获取宽度和高度参数。这将有助于"砌体"方面，但与惰性加载机制相矛盾。

我将不胜感激任何正确方向的指示。

我现在

正在使用砌体，我认为它适合您的需求。我有不同的宽度和高度图像，我以固定的最大宽度（固定宽度或相对于页面宽度）加载，然后，布局重新排序以避免空白并保持图像的纵横比。当我到达页面底部时，我（"手动"）加载了更多项目。这是我的代码 

//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  
    }
});

您可以在 http://pintevent.com（是测试页面）查看结果

然后，很容易将 LazyLoad 添加到所有图像，这是一个工作示例：http://jsfiddle.net/nathando/s3KPn/4/（摘自一个类似的问题：结合LazyLoad和Jquery Masonry）

另外，如果它不适合你，这里有一堆 jquery LazyLoad 库，你可以检查画廊：http://www.jqueryrain.com/demo/jquery-lazy-load/

希望对您有所帮助！

相关文章：