JavaScript/Ajax 窗口高度

Question

http://sols.no/galleri/

如果您向下滚动到页面底部，您可以看到新图像正在加载，但我希望它在一直向下滚动到底部之前加载它们。

这是页面模板中的代码

<?php 
/**
 * Template Name: gallery
 */
get_header();
?>
<main id="main" role="main">
    <div class="page gallery">
        <?php
            /*$args = array('posts_per_page'   => -1,'post_type' => 'post','orderby' => 'date', 'order' => 'DESC');
            $posts_array = get_posts( $args );
            $postids=array();
            foreach($posts_array as $post){
                $postids[]=$post->ID;
            }*/
            //query_posts(array('post_type'=>'attachment','posts_per_page' => 15,'paged'=>1,'post_status' => 'any', 'post_parent' => null));
            $args = array( 'post_type' => 'attachment','post_status'=>'inherit', 'posts_per_page' => 25,'paged'=>1 , 'post_parent' => null, 'orderby' => 'date', 'order' => 'DESC' );

            $attach = new wp_Query( $args );            
            //while ( have_posts() ) : the_post();
            if ( $attach->have_posts()) {
                while ( $attach->have_posts() ) {
                    $attach->the_post();
                    $parent=wp_get_post_parent_id(get_the_ID());
                    ?>
                        <article class="post-<?php the_ID();?> gallery type-gallery status-publish has-post-thumbnail hentry" id="post-<?php the_ID();?>" >
                            <div class="entry-thumbnail">
                                <a href="<?php echo get_permalink($parent); ?>" rel="bookmark">
                                <?php //the_post_thumbnail('gallery-thumb'); ?>
                                <?php echo wp_get_attachment_image( get_the_ID(), 'gallery-thumb' ); ?>
                                </a>
                            </div><!-- .entry-thumbnail -->
                            <header class="entry-header">
                                <div class="entry-meta">
                                    <?php twentytwelve_entry_meta(); ?>
                                </div>
                                <h1 class="entry-title">
                                    <a href="<?php echo get_permalink($parent); ?>" rel="bookmark"><?php echo get_the_title($parent); ?></a>
                                </h1>
                            </header><!-- entry-header -->
                            <a href="<?php echo get_permalink($parent); ?>" class="entry-link"><span class="screen-reader-text">Continue reading <span class="meta-nav">&rarr;</span></span></a>
                        </article>
                        <?php
                        }
            //endwhile;
            wp_reset_query();
            }
            // Reset Query

            //load more links
        ?>
    </div>

    <div class="gallery-btn" style="display:none;">
        <img src="<?php echo get_template_directory_uri(); ?>/images/ajax-loader.gif" class="loader-img" />
        <a class="loadmore" href="#" rel="2">Load more</a>
    </div>
</main> 
<script>
jQuery(document).ready(function($){
$(window).scroll(function() {
  if($(window).scrollTop() + $(window).height() == $(document).height())  {
      $("a.loadmore").click();
   }
});
});
jQuery(document).ready(function($){
    $("a.loadmore").click(function(){
        var pageno=parseInt($(this).attr('rel'));
        $(".gallery-btn").addClass('loader');
        // here we call ajax
        var data = {
            action: 'loadmore',
            pageno: pageno,
            _ajax_nonce: '<?php echo wp_create_nonce( 'my_ajax_nonce' ); ?>'
        };
        $.post(MyAjax.ajaxurl, data, function(response) {
            if(response!=""){
                $(".page.gallery").append(response);
                $("a.loadmore").attr('rel',pageno+1);
                $(".gallery-btn").removeClass('loader');
            }
            else{
                $("a.loadmore").hide();
                $(".gallery-btn").removeClass('loader');
            }
        });
        //
        return false;
    });
});
</script>
<?php get_footer(); ?>

我发现这与这段代码有关。但我不知道如何让它发挥作用。

jQuery(document).ready(function($){
$(window).scroll(function() {
  if($(window).scrollTop() + $(window).height() == $(document).height())  {
      $("a.loadmore").click();
   }
});
});

Answer 1

请使用这个新的...

jQuery(document).ready(function($){
  $(window).scroll(function() {
    if($(window).scrollTop() + $(window).height() >= $(document).height()-800)  
    {
      $("a.loadmore").click();
    }
  });
});