Question

我正在使用asp中的无限滚动脚本。

有没有人知道如何更改此jquery以包含“加载更多”按钮而不是识别滚动到页面末尾的代码？

$(document).ready(function(){

    $('form#posts').bind('submit', function(e){
        e.preventDefault();
        checkForm();
    });

    $('input#hostName').focus();


    function lastPostFunc() 
    { 
        $('div#lastPostsLoader').html('<img src="bigLoader.gif">');
        $.post("test.asp?action=getLastPosts2&lastID="+$(".wrdLatest:last").attr("id"),

        function(data){
            if (data != "") {
            $(".wrdLatest:last").after(data);
            }
            $('div#lastPostsLoader').empty();
        });
    };  


    $(window).scroll(function(){
        if  ($(window).scrollTop() == $(document).height() - $(window).height()){
           lastPostFunc();
        }
    }); 

});

提前感谢任何指示。

理查德

Answer 1

http://jsfiddle.net/G65cS/

$(window).scroll(function () {
    if ($(window).scrollTop() == $(document).height() - $(window).height()) {
        $('.loadMore').fadeIn(200);
    }
});

$('.loadMore').click(function () {
    $('.loadMore').fadeOut(200);
    $('.container').append(content); 
    // PUT YOUR AJAX REQUEST HERE INSTEAD of the .append();
    /* $.post("test.asp?action=getLastPosts2&lastID="+$(".wrdLatest:last").attr("id"),

       function(data){
           if (data != "") {
              $(".wrdLatest:last").after(data);
           }
           $('div#lastPostsLoader').empty();
       });
    */
});

我在演示中使用了Lipsum字符串作为示例，但您可以轻松地将其替换为加载gif和ajax调用以用于您的目的。希望这可以帮助！如果您有任何问题，请告诉我。

Answer 2

删除$(window).scroll事件处理程序并添加：

JS：

$('#load').click(function() {
    lastPostFunc();
});

HTML：

<button id="load" type="button">Load more</button>

当然应该在页面末尾添加HTML按钮。

Jquery从窗口滚动更改为加载更多按钮

2 个答案: