Lazy load blog posts

Question

I have a list of blog posts and the number is reaching 25+ but it\'s all in the one page so I need to try and build a lazy loader.

I have tried various plugins but none

Answer 1

I don't know how your setup is, but i would suggest using jquery to find out distance from top of page this would be:

var scrollTop     = $(window).scrollTop(),
    elementOffset = $('#my-element').offset().top,
    distance      = (elementOffset - scrollTop);

as per this stack overflow post : Determine distance from the top of a div to top of window with javascript

apply that to your 25th post by putting numbered id's or names on each (I supposed the page is PHP generated).

then use ajax to load more blog posts when the distance reaches a certain amount.

EDIT: you can use jquery greater-than to hide them:

$(".element-class:gt(24)").css("display","none");​

documentation here: http://api.jquery.com/gt-selector/

then just if you scroll past a certain scroll-top, you can just set

$("visible-element").css("display","block")

EDIT 2: TRY THIS FIDDLE - http://jsfiddle.net/addiktedDesign/KjNnY/