最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

theme development - Infinite scroll without plugin using ajax

programmeradmin1浏览0评论

I've created an infinite scroll without using any plugin to achieve the objective. The problem is that the bootstrap masonry cards grid are loading all the posts cards at the first scroll or will load the grid in a wrong way until a scroll event occurs. I'm using the viewport checker jquery plugin that will work nice when the page where I've implemented this is loaded,it will add a fade in animation from the animate.css library, but on the appended elements it will not work and I need to add the class manually. I want to obtain a smooth fade in effect, is there any fix for this problem?

EDIT: Here is the code I'm using

<script type="text/javascript">
(function($){

  $(document).ready(function(){

    if(!/Mobile|Android/.test(navigator.userAgent)){
      // improve load
    var pull_page = 1;
    var jsonFlag = true;
    $(document).scroll(function(e){
      e.preventDefault();
      if( $(window).scrollTop() +1 >= $(document).height() - $(window).height() && jsonFlag){
          pull_page++;
          $.getJSON("/wp-json/portfolio/all-posts?page=" + pull_page, function(data){
            if(data.length >= 6){
              $.each(data, function(i, item){
                var card = '<div class="card" id="page-portfolio-card">';
                card += '<a href="'+ item.permalink +'">';
                card += '<img class="card-img-top w-100" src="'+ item.featured_img_src +'" id="case-studies" />';
                card += '<div class="overlay"><h4 class="text-center" id="client-name">'+ item.title +'</h4></div>';
                card += '</a>';
                card += '</div>';
                $(card).hide();
                $('.card-columns').append(card);
                $(card).fadeIn('slow');
                //.find('.card-columns')
                //.append(html);
              });
            }
            else{
              jsonFlag = false;
            }
          })
          .done(function(data){
            if(data.length >= 6){
              jsonFlag = true;

            }
            else{
              jsonFlag = false;
            }
          });
        }
      });
    }
    }); // document ready
  }(jQuery));
</script>

Whit the code above, the cards are loaded all at the same time and no fadeInUp effect from animate.css is used. I need to fix this.

发布评论

评论列表(0)

  1. 暂无评论