Which event gets fired when an element is shown to the user?

Question

I have a page with lots of images. It doesn't make sense to have the browser load them all, if the user hasn't scrolled down yet to where the images are. I thought of binding the img element to an event handler that fires when the containing div would be visible (in the sense that the user has scrolled enough such that the element is in the viewport). This handler will then rewrite the src attribute and the image will load.

What's the event I am looking for?

Answer 1

There is no native jQuery event doing what you want. You'd need to use the scroll event to get the scroll position, get visible images, and load them.

There already is plug-ins doing this for you. Maybe the appear jQuery plug-in is what you're looking for: http://code.google.com/p/jquery-appear/

This may be a duplicate of this question: Make images load when they enter visible section of browser?

Answer 2

$(window).scroll(function(){

 // if user has scrolled to 250px 
 if ($(this).scrollTop() > 250){ 
    // load your images,
 } 
})

A better approach would be placing a div at bottom and using mouseenter event to detect if user wants more picture.

$('#the_bottom_div').mouseenter(function(){
   // If user has placed mouse on bottom,load images (like facebook does)
})