Question

I want to load elements as they scroll into view to reduce server load e.g. thumbnails, but would like their placeholder divs to exist from when the page loads. To do this, I think I need a trigger of some kind when the div becomes visible.

jquery-appear was suggested but I cannot seem to get a copy of it from anywhere (Google gives me a 403 error)

Does anyone know how else to do this?

Answer 1

I think jQuery way points is the plugin you might need:

http://imakewebthings.com/jquery-waypoints/

Below is how you can call a waypoint plugin:

$(document).ready(function() {
    var $loading = $("<div class='loading'><p>Loading more items&hellip;</p></div>"),
    $footer = $('footer'),
    opts = {
        offset: '100%'
    };

    $footer.waypoint(function(event, direction) {
        $footer.waypoint('remove');
        $('body').append($loading);
        $.get($('.more a').attr('href'), function(data) {
            var $data = $(data);
            $('#container').append($data.find('.article'));
            $loading.detach();
            $('.more').replaceWith($data.find('.more'));
            $footer.waypoint(opts);
        });
    }, opts);
});