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.

  • Try this code: var flag = true; var display_data = $(window).height() / 2; $(window).scroll(function(){ if( flag ){ if( $(window).scrollTop() > display_data ){ flag = false; //your ajax code here } else { //Do nothing on scroll up } //Disabling ajax call for scroll up display_data = $(window).scrollTop(); } }); – Bhupen May 16 at 10:01
  • @Bhupen I've added my js code to the question. Mainly the problem is with the fade in effect of the cards after that the ajax call is done. I'm sure that this is because I've made a mistake with the code? – Yikko May 16 at 13:26
  • you can use "beforesend" to manage the fade in and fade out effect. stackoverflow.com/questions/21648356/… – Bhupen May 17 at 9:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.