How can I lazy load blog posts to keep the page size down?

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/

JavaScript:

(function($) {

    $.belowthefold = function(element, settings) {
        var fold = $(window).height() + $(window).scrollTop();
        return fold <= $(element).offset().top - settings.threshold;
    };

    $.abovethetop = function(element, settings) {
        var top = $(window).scrollTop();
        return top >= $(element).offset().top + $(element).height() - settings.threshold;
    };

    $.rightofscreen = function(element, settings) {
        var fold = $(window).width() + $(window).scrollLeft();
        return fold <= $(element).offset().left - settings.threshold;
    };

    $.leftofscreen = function(element, settings) {
        var left = $(window).scrollLeft();
        return left >= $(element).offset().left + $(element).width() - settings.threshold;
    };

    $.inviewport = function(element, settings) {
        return !$.rightofscreen(element, settings) && !$.leftofscreen(element, settings) && !$.belowthefold(element, settings) && !$.abovethetop(element, settings);
    };

    $.extend($.expr[':'], {
        "below-the-fold": function(a, i, m) {
            return $.belowthefold(a, {threshold : 0});
        },
        "above-the-top": function(a, i, m) {
            return $.abovethetop(a, {threshold : 0});
        },
        "left-of-screen": function(a, i, m) {
            return $.leftofscreen(a, {threshold : 0});
        },
        "right-of-screen": function(a, i, m) {
            return $.rightofscreen(a, {threshold : 0});
        },
        "in-viewport": function(a, i, m) {
            return $.inviewport(a, {threshold : 0});
        }
    });


})(jQuery);

$(function() {
    var previous = "";
    $(window).bind("scroll", function(event) {

        $(".blog-post:in-viewport").each(function() {
          $(this).addClass("visible");
        });


    });
});

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

Where am I going wrong?

Answer 1

You are asking about lazy loading.

Well, the answer must include a server-side component. Your question does not specify what type of server-side language you are using. In my answer I will use some basic PHP code for mocking random blog posts.

Lazy loading means that we only load what the user can see, and later load more data when needed.

Loading data means requesting it from a server. This usually involves Ajax, but not necessarily (although you probably can use Ajax). jQuery has a wonderful Ajax interface.

The biggest question is: what should trigger my next load? Hence all the plugins.

I took Tgr's advice and implemented a lazy load with waypoints. I even used waypoint tutorial for lazy loading as Tgr suggested.

You can see my implementation at my site.

What I made was mock blog posts with changing title. Each time the user scrolls down enough, I get more posts from the server.

I added a download link for my source, so you can download and start playing with it. just run main.html and you're good to go.

The file more_posts.php generates a lorem ipsum post with a random title (I needed some fake content to have a scroll on the page).

It looks like this:

<h1> This is post number <?php echo uniqid("",true)?> </h1>

<div style="color:red">
    Lorem ipsum dolor .... Quisque ut pretium nibh.
</div>

<div style="color:blue">
    Lorem ipsum dolor .... Quisque ut pretium nibh.
</div>

As you can see, the only PHP code I have is to add something random to the title.

This should look familiar to you since you already have 25+ posts in your blog.

The real logic lies in main.html, and the HTML part looks like so:

<section id="container">

</section>

<footer>
    <nav>
        <ul>
            <!-- Hijack this link for the infinite scroll -->
            <li class="more"><a href="more_posts.php" title="Traditional navigation link">Next Page</a></li>
        </ul>
    </nav>
</footer>

The idea is you have section which contains the first few posts, and it gives you some scrolling on the page. At bottom, you have a more link within a footer; that is for when JavaScript is disabled, it should act as a regular "next" link.

Waypoint uses this link to trigger the next load. Whenever the link is about to show on screen we will use Ajax to get the next post automatically.

So the JavaScript part looks like so:

$(document).ready(function() {

    function loadMorePosts(callback) {
        $.get($('.more a').attr('href'), function(data) {
            $('#container').append($(data));
            if (typeof(callback) == "function") {callback();}
        })
    }
    loadMorePosts();

    var $footer = $('footer');
    var opts = {
        offset: '100%'
    };

    $footer.waypoint(function(event, direction) {
        $footer.waypoint('remove');
        loadMorePosts(function() {$footer.waypoint(opts);});
    }, opts);
});

The function loadMorePosts invokes the method $.get which is a simpler syntax for $.ajax({type:'GET' .. }). It uses the same URL as the link's href attribute has. In my example the href attribute points to "more_posts.php".

When my demo loads, the content is completely empty, so I go ahead and fetch the first post I want to show. Then I tell waypoint to listen on the footer - and whenever the footer is close by, I go and get more posts.

There's a tricky part where I do $footer.waypoint('remove') and pass a callback to loadMorePosts which binds waypoint to footer once again. This is just a technicality - waypoint need you to remove the trigger while you fetch more HTML, other your page might act funny...

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 the 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.

You can use jQuery greater-than to hide them:

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

Documentation is 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")

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.

You can try to have each blogpost element hidden except for the first three, and then on.

Answer 4

I have tried getting the top of an element and displaying content when it is in viewport, the content could be just hidden or loaded from ajax call. Try this code. You can experiment with sensitivity variable to see what works for you best:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
    <script type="text/javascript">
        var processScroll = true;
        var sensitivity = 10;
        function handleScroll()
        {
            if (processScroll) {
                processScroll = false;
                topHidden = $('.block_hidden:first').offset().top;
                if(($(window).scrollTop() + $(window).height() ) > (topHidden + sensitivity))
                {
                    console.log('show now');
                    $('.block_hidden:first').removeClass('block_hidden').addClass('block');
                }
            }

            processScroll = true;
        }

        $(document).ready(function()
        {
            $(window).scroll(handleScroll);
        });
    </script>

    <style>
        .block_hidden{
            width:300px;
            background: green;
            margin:5px;
            visibility: hidden;
            height: 10px !important;
        }

        .block{
            height: 200px;
            width:300px;
            background: green;
            margin:5px;
        }
    </style>

</head>
<body>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block_hidden"></div>
    <div class="block_hidden"></div>
    <div class="block_hidden"></div>
    <div class="block_hidden"></div>
    <div class="block_hidden"></div>
    <div class="block_hidden"></div>
</body>
</html>

Answer 5

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