gistfile1.js

var page = 1;
var loader_src = $('#loader').attr('src');

$('.holder').attr('src', loader_src);

$('#right .gallery a').each(function(iterator, item) {
    var holder = $("<img/>")
            .css("display", "none")
            .addClass("holder")
            .data("img", $(this).children())
            .load(function(e) {
        var src = $(this).attr("src");
        $(this).data("img").attr("src", src);

    });
    $(item).data("holder", holder);
});

var loader = (function() {
    var cache = {};

    return {
        changePage: function(page) {
            $('.gallery .image img').attr('src', loader_src);
            var url = "/home/index.js?page=" + page;
            console.log(url);
            loader.fetch(url);
        },
        fetch: function(url) {
            if (cache[url]) {
                loader.loadImages(url);
            } else {
                $.getJSON(url, function(data) {
                    cache[url] = data;
                    loader.loadImages(url);
                });
            }
        },
        loadImages: function (url) {
            var data = cache[url];
            for (var img in data) {
                var selector = ".image-" + img;
                var currentSrc = data[img];

                var holder = $(selector).data("holder");
                holder.attr("src", currentSrc);

            }
        }
    };
})();


$('#right').mousewheel(function(event, delta) {
    event.preventDefault();
    if (delta == -1) {
        console.log("scroll down");
        page += 1;
        loader.changePage(page)
    } else if (delta == 1) {
        console.log("scroll up");
        if (page > 1) {
            page -= 1;
            loader.changePage(page)
        }
    } else {
        console.error("invalid delta on scroll event");
    }
});