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 are working

http://jsfiddle.net/tara_irvine/S9GGz/6/

http://jsfiddle.net/tara_irvine/S9GGz/9/

http://jsfiddle.net/tara_irvine/S9GGz/13/

Is there a way to check the top value of a div and if it's in view then a class is added so the div becomes visible (page load the div is hidden)

I have looked at these posts but after trying out various solutions none have worked for me.

How to check if an element is in the view of the user with jquery Position of Div in relation to the Top of the Viewport

If anyone can shed some light on this I would be very grateful. I don't know where I am going wrong.

Thanks very much

Answer 1

jQuery Waypoints is a nice plugin for reacting on elements coming into view; they even have a lazy-loading example.

Answer 2

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/

Answer 3

http://archive.plugins.jquery.com/project/lazyload is a list of lazy loading pliugins but it's more for images loading.

what you can try is have each blogpost element hidden except for the first three, then on