myloadmore.js

/** Notes by Sally:
 * 1) This file uses tab for indentation and not spaces.
 * 2) I set the bottomOffset to a dynamic value.
 * 3) I added the max_page check.
 */
// REPLACE THE "article" with "div" or the proper tag, if it's not "article".
jQuery(function($){
    var canBeLoaded = true, // this param allows to initiate the AJAX call only if necessary
        // the distance (in px) from the page bottom when you want to load more posts,
        bottomOffset = ( $( '#main > article.post:last' ).offset() || {} ).top;

    $(window).scroll(function(){
        if ( misha_loadmore_params.current_page >= misha_loadmore_params.max_page ) {
//          console.log( 'max_page reached; AJAX canceled' );
            return; // we've already reached the last page, so let's do no more AJAX.
        }
        var data = {
            'action': 'loadmore',
            'query': misha_loadmore_params.posts,
            'page' : misha_loadmore_params.current_page
        };
        if( $(document).scrollTop() > ( $(document).height() - bottomOffset ) && canBeLoaded == true ){
            $.ajax({
                url : misha_loadmore_params.ajaxurl,
                data: data,
                type: 'POST',
                beforeSend: function( xhr ){
                    // you can also add your own preloader here
                    // you see, the AJAX call is in process, we shouldn't run it again until complete
                    canBeLoaded = false;
                },
                success:function(data){
                    if( data ) {
                        $('#main').find('article:last-of-type').after( data ); // where to insert posts
                        canBeLoaded = true; // the ajax is completed, now we can run it again
                        misha_loadmore_params.current_page++;

                        bottomOffset = ( $( '#main > article.post:last' ).offset() || {} ).top
                    }
                }
            });
        }
    });
});