Question

I have a requirement where i need to display 1000 images which will take lot of time if i need to display all at once . So each time the user scrolls , i want to know the last element or first element in the viewport .Is that possible using jquery ?How can i achieve it .
Thanks in advance

Answer 1

Taken from this: Check if element is visible after scrolling

function isScrolledIntoView(elem)
{
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom));
}

Now simply loop through your elements and test them each to see if they are visible and take the last one.

For a lot of elements this will be slow. I recommend doing some kind of sorting when the page loads and then doing a binary search instead.