lazyload

index.html

<div class="row">
  <div class="columns">
<p>Lazy Load Test</br>Titles and Dates</p>
<div id="cand"></div> 
  </div>
</div>

lazyload.markdown

lazyload

A Pen by Brandon Lawrence on CodePen.

License.

script.js

var wH = $(window).height();
var pH = $('p').outerHeight();
var limit = Math.ceil(wH/pH) - 3;
var offset = 0;
var counter = 0;
var initLoad = function() {
  console.log('http://www.stellarbiotechnologies.com/media/press-releases/json?limit=' + limit + '&offset=' + offset);
	$.ajax({
  type: 'GET',
  url: 'http://www.stellarbiotechnologies.com/media/press-releases/json?limit=' + limit + '&offset=' + offset,
  dataType: 'json',
  success: function(data) {
    var news = data.news;
    for(var i = 0; i < news.length; i++) {
      counter +=1;
      console.log(counter);
        $('#cand').append('<p>'+news[i].title+'<br>' + news[i].published.slice(0, - 9) + '</p>');
        } 
  }
});
}
initLoad();
offset = limit;
limit = 3;
$(window).scroll(function() {
   if($(window).scrollTop()+ $(window).height() == $(document).height()) {
       initLoad();
       offset += limit;
   }
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

@-webkit-keyframes fadein {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-moz-keyframes fadein {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-o-keyframes fadein {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes fadein {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
body {
  background: #009688;
}
p {
  -webkit-animation: fadein 1.5s ; 
  -moz-animation:    fadein 1.5s ; 
  -o-animation:      fadein 1.5s ; 
  animation:         fadein 1.5s ;
  font-family: open sans;
  color: white;
}

styles

<link href="https://cdn.jsdelivr.net/foundation/5.5.0/css/foundation.css" rel="stylesheet" />