Question

如何制作它，以便默认情况下，页面上会显示6个div元素，当用户滚动到页面底部时，还会加载6个元素？

如果您看到此example，则会有多个div。我想最初只显示其中的6个，每次用户到达页面底部时，我想要再加载6个，直到你用完了div。

到目前为止，我已经尝试过使用jQuery无限滚动插件，但它们并不适用于我的情况，因为实际上我拥有的元素数量非常有限！

如何使用jQuery实现这一目标？提前谢谢！

修改

我相信可以将其余的div设置为隐藏（除了前6个），并触发一个在页面底部到达时再加载6个的函数。

Answer 1

我已经创建了一个非常快速的示例，它没有通过工作进行优化：

http://jsfiddle.net/gRzPF/2/

Answer 2

您应该可以使用以下内容：

jQuery( window ).scroll( function( ) {
    var loadHeight = jQuery( document ).height( ) - jQuery( window ).height( );
    if( haveDivsToLoad && jQuery( window ).scrollTop( ) >= loadHeight ) {
        // fire your load function here
    }
} );

您可能需要使用loadHeight来让它让您满意。

编辑：我在检查中添加了haveDivsToLoad。您应该将其设置为全局（或闭包）变量，并将其设置为true或false，具体取决于是否需要加载div个。{/ p>

Answer 3

让我们假设你有一个div数组，每个div都用document.createElement("div")或类似的初始化。让我们假设您有大量的数组。

var myArrayOfDivs = [];//see above
var DivsAdded = 6;//as stated, 6 were already added - index 6 is the 7th element
$(window).scroll(function () {
    if ($(window).scrollTop() == $(document).height() - $(window).height()) {
        for(int i = 0; i < 6; i++){
         if( myArrayOfDivs.length < DivsAdded ) break;
         $("#elementToAppendIn").append(myArrayOfDivs[DivsAdded++]);
        }
    }
});

Answer 4

经过一些实验，我找到了完美的答案：

http://jsfiddle.net/jackdent/gRzPF/12/

jQuery滚动显示隐藏的内容

4 个答案: