且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

Ajax请求,以同时滚动页面加载内容

更新时间:2023-11-11 07:55:22

1)我前几天做了一个类似的一块codeA。这里我分配页面滚动事件的函数检查用户多少像素距离的底部。如果用户具有300或更少的像素更少的loadMoreArticles()功能被触发:

1) I've made a similar piece of code a few days ago. Here I assign the page scrolling event to a function which checks how much pixels the user is away from the bottom. If the user has 300 or less pixels less the loadMoreArticles() function is triggered:

$(document).scroll(function(){
        if(($(document).height()-$(window).height()-$(document).scrollTop()) < 300){
            console.log('Scrolled to bottom');
            ArticleList.loadMoreArticles();
        } else {
            console.log('Scroll '+$(document).height()+' - '+$(window).height()+' - ' +$(document).scrollTop());
        }
    });

在执行console.log()函数向您展示了它以正确的方式实施

The console.log() functions shows you it's implemented in the right way

2)您可以重新添加的功能,你已经追加新内容之后。像这样的:

2) You can add the functionalities again after you've appended the new content. Like this:

$(window).on('scroll',function(){
  if($(window).scrollTop()==($(document).height()-$(window).height())){
    //Get older posts
    $.ajax({
        type: 'POST',
        url: 'action/getoldposts.php',
        success: function(oldposts){
            //Append #postsDiv
            $('#postsDiv').append(oldposts);
            //Remove all functionalities
            $('#postsDiv').off('keydown');
            //Add all functionalities again
            $('#postsDiv').on('keydown', '.commenttext', function(e) {
                if ((e.which == 13) && !e.shiftKey) {
                    comment($(this));
                    return false;
                }
            });
        }
    });
  } 
});