jquery - 如何通过一次仅获取 5 个对象来加载整个列表，并仅为移动设备激活该机制？

Question

我一直在尝试制作一个包含一长串项目的网站。为了更好的用户体验，我需要这个列表不是一次加载所有项目，而是分几个部分，并且只加载真正需要的那些。

使用下面的代码，我设法让它工作。它一次以 5 个对象的小批量加载数据。仅当用户单击“显示更多”按钮时才下载下一批，并且只要有更多延迟项目，该按钮就可见。

它可以工作，但我需要您的帮助才能使此功能仅在某些屏幕尺寸上工作（比如说宽度 < 480 像素），因为我不需要具有大屏幕的经典客户端的整个机制。

我也可以在加载时为列表设置动画以在加载时平滑显示。

<script>
$('.list li:gt(4)').hide();
$('.show_button').click(function() {
$('.list li:hidden:lt(5)').show();
if( ! $('.list li').is(':hidden') )
$(this).hide();
return false;
});
</script>

jsfiddle链接

感谢并希望在此问题上获得快速帮助。

Answer 1

给这个bash：

function checkWindowSize() {
    var pageWidth = $(window).width();  
    if (pageWidth <= 480) {
        $('.show_button').show();
        $('.list li:gt(4)').hide();
        $('.show_button').click(function() {
            $('.list li:hidden:lt(5)').show();
            if(!$('.list li').is(':hidden'))
                $(this).hide();
            return false;
        });
    } else {
        $('.show_button').hide();
    }
}

$(document).ready(function() {
    $('.show_button').hide();
    checkWindowSize();
    $(window).resize(checkWindowSize);  
});