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

【问题标题】：Jquery change from window scroll to load more buttonJquery 从窗口滚动更改为加载更多按钮
【发布时间】：2014-07-01 20:42:12
【问题描述】：

我正在使用 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();
        }
    }); 

});

提前感谢您的任何指点。

理查德

【问题讨论】：

好吧，你的意思是检测scrollTop是否达到windows bottom你想提前加载更多。我说的对吗？

标签： jquery scroll load infinite

【解决方案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 调用以达到您的目的。希望这可以帮助！如果您有任何问题，请告诉我。

【讨论】：

【解决方案2】：

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

JS：

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

HTML：

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

当然 HTML Button 应该加在页面末尾。

【讨论】：