Getting Javascript/jQuery scrolling function to work on successive divs

I'm currently trying to implement functionality similar to infinite/continuous/bottomless scrolling, but am coming up with my own approach (as an intern, my boss wants to see what I can come up with on my own). So far, I have divs of a fixed size that populate the page, and as the user scrolls, each div will be populated with an image. As of now, the function I've written works on the first div, but no longer works on successive divs.

        $(window).scroll(function () {
        var windowOffset = $(this).scrollTop();
        var windowHeight = $(this).height();
        var totalHeight = $(document).height();

        var bottomOffset = $(window).scrollTop() + $(window).height();

        var contentLoadTriggered = new Boolean();

        var nextImageCount = parseInt($("#nextImageCount").attr("value"));
        var totalCount = @ViewBag.totalCount;
        var loadedPageIndex = parseInt($("#loadedPageIndex").attr("value"));

        var calcScroll = totalHeight - windowOffset - windowHeight;

        $("#message").html(calcScroll);

        contentLoadTriggered = false;

        if (bottomOffset >= ($(".patentPageNew[id='" + loadedPageIndex + "']").offset().top - 1000) 
        && bottomOffset <= $(".patentPageNew[id='" + loadedPageIndex + "']").offset().top && contentLoadTriggered == false
        && loadedPageIndex == $(".patentPageNew").attr("id"))
        {
            contentLoadTriggered = true;
            $("#message").html("Loading new images");
            loadImages(loadedPageIndex, nextImageCount);
        }
    });

This is the image-loading function:

        function loadImages(loadedPageIndex, nextImageCount) {
        var index = loadedPageIndex;
        for(var i = 0; i < nextImageCount; i++)
        {
            window.setTimeout(function () {
                $(".patentPageNew[id='" + index + "']").html("<img src='/Patent/GetPatentImage/@Model.Id?pageIndex=" + index + "' />");
                index++;
                var setValue = index;
                $("#loadedPageIndex").attr("value", setValue);
            }, 2000);
        }
    }

I was wondering what may be causing the function to stop working after the first div, or if there might be a better appr开发者_如何转开发oach to what I'm attempting?

EDIT: It seems that loadedPageIndex == $(".patentPageNew").attr("id") within the if statement was the culprit.

@ViewBag.totalCount; is not a JavaScript, it's .NET, so your script probably stops after encountering an error.

Also: ".patentPageNew[id='" + loadedPageIndex + "']" is inefficient. Since IDs must be unique, just query by ID instead of by class name then by ID.