Question

我有一个site you can see the example，当您滚动到页面底部时，它会传播更多内容。我设置它一次显示36条记录，所以当用户点击页面底部时，它会加载接下来的36条记录（连续滚动）。

我注意到的是，当我使用台式电脑滚动时几乎没有任何延迟。它的加载速度非常快。当我用手机滚动时，用户“可能”认为它们位于页面底部并且不想继续滚动时存在滞后。

我的想法是，当用户点击页面中间而不是等到页面底部时，我希望能够加载下一组内容（36条记录）。我（在我看来）的推理是，它提供（较慢的设备和带宽）时间来提前加载内容以补偿滞后。

有没有办法在jquery中指定在页面的50％处加载.scroll的内容，而不是等到用户点击底部？

这是我的jquery

$(window).scroll(function() {
    if($(window).scrollTop() === $(document).height() - $(window).height()) {
        if ($("#genres").val() == 'moviesidontlike') {
            last_id = $(".getmoremovies:last").attr("id");
            $.ajax({
                type: "POST",
                url: "includes/getmoredontlike.php?",
                data: "last_id="+ last_id,
                success: function(data) {
                    $( ".append" ).append(data);
                }
            });
            return false;
        } else if ($("#genres").val() == 'moviesilike') {
            last_id = $(".getmoremovies:last").attr("id");
            $.ajax({
                type: "POST",
                url: "includes/getmorelike.php?",
                data: "last_id="+ last_id,
                success: function(data) {
                    $( ".append" ).append(data);
                }
            });
            return false;
        } else if ($("#genres").val() == 'recommendations') {
        } else {
            last_id = $(".getmoremovies:last").attr("id");
            thissearch = $('#search').val();
            genres = $("#genres").val();
            $.ajax({
                type: "POST",
                url: "includes/getmore.php?",
                data: "last_id="+ last_id+
                "&genres="+ genres+
                "&search="+ thissearch,
                success: function(data) {
                    $( ".append" ).append(data);
                }
            });
            return false;
        }
    }
});

Answer 1

你应该尝试：

$(window).on('scroll load', function() { // adding load event to handle it in case of default scroll done on page load
    var scrolled = $(this).scrollTop(),
        docHeight = $(document).height(),
        windHeight = $(this).height();
    var scrollPercent = ((scrolled  / (docHeight  - windHeight )) * 100).toFixed(2);
    if (scrollPercent >= 50) {
        //load more stuff...
    }
});

就是说，滚动事件可以连续多次调用，你应该使用超时一点肯定地去掉它。

还有一件事，如果在ajax请求后添加内容时滚动百分比仍然超过50％，它会一次又一次地加载更多内容。这个逻辑显然可能难以处理......

使用.quroll预加载内容，然后用户在页面的50％（中间）到达页面底部

1 个答案: