2015-11-21 2 views
1

http://sols.no/galleri/JavaScript/Ajax высота окна

Если вы прокрутите вниз до нижней части страницы вы можете увидеть новые образы загрузки, но я хочу, чтобы загрузить их перед прокруткой весь путь вниз к основанию.

Вот код из шаблона страницы

<?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(); 
    } 
}); 
}); 
+0

Вы должны определить порог, прямо сейчас вы загружаете изображения только тогда, когда вы прибудете в нижней части страницы, вы должны начать загрузку изображения несколько пикселей раньше, так что скажем '$ (window) .scrollTop() + $ (window) .height()' == '$ (document) .height() - 150' – peppeocchi

+0

@peppeocchi Я изменил код сейчас is '$ (window) .scrollTop() + $ (window) .height() == $ (document) .height() - 400', но все равно не повезло – AKR

ответ

1

, пожалуйста, используйте этот новый ...

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

Вы можете попробовать это. это может быть полезно для вас.

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

, если у вас есть успех, вы можете установить подходящее число в -place-of 400 –

+0

Я вижу, что вы сделали. Я добавил. Почему вы думаете, что это не работает? Я сделал аналогичное редактирование из другого интернет-источника, но не получилось. – AKR

+1

alert ($ (document) .height()); и alert ($ (document) .height() - 400); поставил его под готовность и проверил, что heppen и дайте мне знать .. –

Смежные вопросы